ajax stands for "Asynchronous Javascript And XML" (Asynchronous JavaScript and XML), which refers to a web development technology for creating interactive web applications.
ajax = Asynchronous JavaScript and XML (a subset of Standard Generalized Markup Language).
ajax is a technology used to create fast and dynamic web pages.
By exchanging a small amount of data with the server in the background, ajax can make web pages update asynchronously. This means that parts of a web page can be updated without reloading the entire page.
Traditional web pages (without using ajax) must reload the entire web page if content needs to be updated. Asynchronous request (XMLHttpRequest object), partial refresh (essentially js dom)
ajax is also used to automatically determine whether the user name is repeated when filling in the form. For example, when you writeblog halfway through writing, the computer suddenly restarts Now, you can restore half of what you wrote.
get is used to obtain data, there is a word limit, the request is included in the URL, post is unlimited, and is used to modify the content of the server.
Get is a safe request and you need to ensure that the information is not modified.
1, ajax is generally used for the current page and does not implement page jumps
2, ajaxside: How to asynchronously monitor the status of the server side? Listening to the readystate attribute through onreadystatechange
request.onreadystatechange = function() {
<span>if (request.readyState===4) {</span>
open()
has not been called yet). send()
has not been called yet). So generally the corresponding operation is performed after judging that it is equal to 4.
But note that this is different from the status of the request
For example, readystate=4 but status=404 means that the response is completed but the content of the response is that the file is not found
So the general approach is to return the content when ==200, and the rest is Just show the pronunciation error.
Please note that in the post request, you must set the url to encode and decode the url, otherwise the result will not be given correctly
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
But there is a problem with url decoding. Since the plus sign will be automatically decoded into a space when urlencoded, & will be decoded into a variable connector, so if these characters appear, they must be transcoded
(when uploading images on canvas I encountered this problem when using the url)
Pic = Pic.replace(/+/g, "%2B");
Pic = Pic.replace(/&/g, "%26");
3. The server returns the interface passed ajax through echo.
(Tip: zendstudio’s built-in browser will always display the last page for ajax pages, so run it in an external browser instead
Settings in the preference-general-web browser.)
If you only Returning a simple row does not require Jason. Jason can more conveniently return data with different key values.
<span> 1</span><span><!</span><span>DOCTYPE HTML</span><span>></span><span> 2</span><span><</span><span>html</span><span>></span><span> 3</span><span><</span><span>head</span><span>></span><span> 4</span><span><</span><span>meta </span><span>http-equiv</span><span>="Content-Type"</span><span> content</span><span>="text/html; charset=utf-8"</span><span>></span><span> 5</span><span><</span><span>title</span><span>></span>Demo<span></</span><span>title</span><span>></span><span> 6</span><span><</span><span>style</span><span>></span><span> 7</span><span>body, input, select, button, h1 </span><span>{</span><span> 8</span><span> font-size</span><span>:</span><span> 28px</span><span>;</span><span> 9</span><span> line-height</span><span>:</span><span>1.7</span><span>;</span><span>10</span><span>}</span><span>11</span><span></</span><span>style</span><span>></span><span>12</span><span></</span><span>head</span><span>></span><span>13</span><span>14</span><span><</span><span>body</span><span>></span><span>15</span><span>16</span><span><</span><span>h1</span><span>></span>员工查询<span></</span><span>h1</span><span>></span><span>17</span><span>18</span><span><</span><span>label</span><span>></span>请输入员工编号:<span></</span><span>label</span><span>></span><span>19</span><span><</span><span>input </span><span>type</span><span>="text"</span><span> id</span><span>="keyword"</span><span>/></span><span>20</span><span><</span><span>button </span><span>id</span><span>="search"</span><span>></span>查询<span></</span><span>button</span><span>></span><span>21</span><span><</span><span>p </span><span>id</span><span>="searchResult"</span><span>></</span><span>p</span><span>></span><span>22</span><span>23</span><span><</span><span>h1</span><span>></span>员工新建<span></</span><span>h1</span><span>></span><span>24</span><span><</span><span>label</span><span>></span>请输入员工姓名:<span></</span><span>label</span><span>></span><span>25</span><span><</span><span>input </span><span>type</span><span>="text"</span><span> id</span><span>="staffName"</span><span>/><</span><span>br</span><span>></span><span>26</span><span><</span><span>label</span><span>></span>请输入员工编号:<span></</span><span>label</span><span>></span><span>27</span><span><</span><span>input </span><span>type</span><span>="text"</span><span> id</span><span>="staffNumber"</span><span>/><</span><span>br</span><span>></span><span>28</span><span><</span><span>label</span><span>></span>请选择员工性别:<span></</span><span>label</span><span>></span><span>29</span><span><</span><span>select </span><span>id</span><span>="staffSex"</span><span>></span><span>30</span><span><</span><span>option</span><span>></span>女<span></</span><span>option</span><span>></span><span>31</span><span><</span><span>option</span><span>></span>男<span></</span><span>option</span><span>></span><span>32</span><span></</span><span>select</span><span>><</span><span>br</span><span>></span><span>33</span><span><</span><span>label</span><span>></span>请输入员工职位:<span></</span><span>label</span><span>></span><span>34</span><span><</span><span>input </span><span>type</span><span>="text"</span><span> id</span><span>="staffJob"</span><span>/><</span><span>br</span><span>></span><span>35</span><span><</span><span>button </span><span>id</span><span>="save"</span><span>></span>保存<span></</span><span>button</span><span>></span><span>36</span><span><</span><span>p </span><span>id</span><span>="createResult"</span><span>></</span><span>p</span><span>></span><span>37</span><span>38</span><span><</span><span>script</span><span>></span><span>39</span><span>document.getElementById(</span><span>"</span><span>search</span><span>"</span><span>).onclick </span><span>=</span><span>function</span><span>() { </span><span>40</span><span>var</span><span> request </span><span>=</span><span>new</span><span> XMLHttpRequest(); </span><span>41</span><span> request.open(</span><span>"</span><span>GET</span><span>"</span><span>, </span><span>"</span><span>serverjson.php?number=</span><span>"</span><span>+</span><span> document.getElementById(</span><span>"</span><span>keyword</span><span>"</span><span>).value); </span><span>42</span><span> request.send(); </span><span>43</span><span> request.onreadystatechange </span><span>=</span><span>function</span><span>() { </span><span>44</span><span>if</span><span> (request.readyState</span><span>===</span><span>4</span><span>) { </span><span>45</span><span>if</span><span> (request.status</span><span>===</span><span>200</span><span>) { </span><span>//</span><span>不同的status在<strong>百度</strong>可以找到</span><span>46</span><span>var</span><span> data </span><span>=</span><span> JSON.parse(request.responseText);</span><span>//</span><span>json.parse!</span><span>47</span><span>if</span><span> (data.success) { </span><span>//</span><span>注意seccess也返回jason的一个键值</span><span>48</span><span> document.getElementById(</span><span>"</span><span>searchResult</span><span>"</span><span>).innerHTML </span><span>=</span><span> data.msg;</span><span>//</span><span>json中的msg键值</span><span>49</span><span> } </span><span>else</span><span> { </span><span>50</span><span> document.getElementById(</span><span>"</span><span>searchResult</span><span>"</span><span>).innerHTML </span><span>=</span><span>"</span><span>出现错误:</span><span>"</span><span>+</span><span> data.msg; </span><span>51</span><span> } </span><span>52</span><span> } </span><span>else</span><span> {<br></span><span>53</span><span> alert(</span><span>"</span><span>发生错误:</span><span>"</span><span>+</span><span> request.status); </span><span>54</span><span> } </span><span>55</span><span> } </span><span>56</span><span> } </span><span>57</span><span>} </span><span>58</span><span>59</span><span>document.getElementById(</span><span>"</span><span>save</span><span>"</span><span>).onclick </span><span>=</span><span>function</span><span>() { </span><span>60</span><span>var</span><span> request </span><span>=</span><span>new</span><span> XMLHttpRequest(); </span><span>61</span><span> request.open(</span><span>"</span><span>POST</span><span>"</span><span>, </span><span>"</span><span>serverjson.php</span><span>"</span><span>); </span><span>62</span><span>var</span><span> data </span><span>=</span><span>"</span><span>name=</span><span>"</span><span>+</span><span> document.getElementById(</span><span>"</span><span>staffName</span><span>"</span><span>).value </span><span>63</span><span>+</span><span>"</span><span>&number=</span><span>"</span><span>+</span><span> document.getElementById(</span><span>"</span><span>staffNumber</span><span>"</span><span>).value </span><span>64</span><span>+</span><span>"</span><span>&sex=</span><span>"</span><span>+</span><span> document.getElementById(</span><span>"</span><span>staffSex</span><span>"</span><span>).value </span><span>65</span><span>+</span><span>"</span><span>&job=</span><span>"</span><span>+</span><span> document.getElementById(</span><span>"</span><span>staffJob</span><span>"</span><span>).value; </span><span>66</span><span> request.setRequestHeader(</span><span>"</span><span>Content-type</span><span>"</span><span>,</span><span>"</span><span>application/x-www-form-urlencoded</span><span>"</span><span>); </span><span>67</span><span> request.send(data); </span><span>68</span><span> request.onreadystatechange </span><span>=</span><span>function</span><span>() { </span><span>69</span><span>if</span><span> (request.readyState</span><span>===</span><span>4</span><span>) { </span><span>70</span><span>if</span><span> (request.status</span><span>===</span><span>200</span><span>) { </span><span>71</span><span>var</span><span> data </span><span>=</span><span> JSON.parse(request.responseText); </span><span>72</span><span>if</span><span> (data.success) { </span><span>73</span><span> document.getElementById(</span><span>"</span><span>createResult</span><span>"</span><span>).innerHTML </span><span>=</span><span> data.msg; </span><span>74</span><span> } </span><span>else</span><span> { </span><span>75</span><span> document.getElementById(</span><span>"</span><span>createResult</span><span>"</span><span>).innerHTML </span><span>=</span><span>"</span><span>出现错误:</span><span>"</span><span>+</span><span> data.msg; </span><span>76</span><span> } </span><span>77</span><span> } </span><span>else</span><span> { </span><span>78</span><span> alert(</span><span>"</span><span>发生错误:</span><span>"</span><span>+</span><span> request.status); </span><span>79</span><span> } </span><span>80</span><span> } </span><span>81</span><span> } </span><span>82</span><span>} </span><span>83</span><span></</span><span>script</span><span>></span><span>84</span><span></</span><span>body</span><span>></span><span>85</span><span></</span><span>html</span><span>></span>
3. Response server code serverjason.php
<?<span>php </span><span>//</span><span>设置页面内容是html编码格式是utf-8</span><span>header</span>("Content-Type: text/plain;charset=utf-8"<span>); </span><span>//</span><span>header("Content-Type: application/json;charset=utf-8"); //header("Content-Type: text/xml;charset=utf-8"); //header("Content-Type: text/html;charset=utf-8"); //header("Content-Type: application/javascript;charset=utf-8"); //定义一个多维数组,包含员工的信息,每条员工信息为一个数组</span><span>$staff</span> = <span>array</span><span> ( </span><span>array</span>("name" => "洪七", "number" => "101", "sex" => "男", "job" => "总经理"), <span>array</span>("name" => "郭靖", "number" => "102", "sex" => "男", "job" => "开发工程师"), <span>array</span>("name" => "黄蓉", "number" => "103", "sex" => "女", "job" => "产品经理"<span>) ); </span><span>//</span><span>判断如果是get请求,则进行搜索;如果是POST请求,则进行新建 //$_SERVER是一个超<strong>全局变量</strong>,在一个脚本的全部作用域中都可用,不用使用global关键字 //$_SERVER["REQUEST_METHOD"]返回访问页面使用的请求方法</span><span>if</span> (<span>$_SERVER</span>["REQUEST_METHOD"] == "GET"<span>) { search(); } </span><span>elseif</span> (<span>$_SERVER</span>["REQUEST_METHOD"] == "POST"<span>){ create(); } </span><span>//</span><span>通过员工编号搜索员工</span><span>function</span><span> search(){ </span><span>//</span><span>检查是否有员工编号的参数 //isset检测变量是否设置;empty判断值为否为空 //超<strong>全局变量</strong> $_GET 和 $_POST 用于收集表单数据</span><span>if</span> (!<span>isset</span>(<span>$_GET</span>["number"]) || <span>empty</span>(<span>$_GET</span>["number"<span>])) { </span><span>echo</span> '{"success":false,"msg":"参数错误"}';<span>//</span><span>jason格式</span><span>return</span><span>; } </span><span>//</span><span>函数之外声明的变量拥有 Global 作用域,只能在函数以外进行访问。 //global 关键词用于访问函数内的<strong>全局变量</strong></span><span>global</span><span>$staff</span><span>; </span><span>//</span><span>获取number参数</span><span>$number</span> = <span>$_GET</span>["number"<span>]; </span><span>$result</span> = '{"success":false,"msg":"没有找到员工。"}'<span>; </span><span>//</span><span>遍历$staff多维数组,查找key值为number的员工是否存在,如果存在,则修改返回结果</span><span>foreach</span> (<span>$staff</span><span>as</span><span>$value</span><span>) { </span><span>if</span> (<span>$value</span>["number"] == <span>$number</span><span>) { </span><span>$result</span> = '{"success":true,"msg":"找到员工:员工编号:' . <span>$value</span>["number"] . ',员工姓名:' . <span>$value</span>["name"] . ',员工性别:' . <span>$value</span>["sex"] . ',员工职位:' . <span>$value</span>["job"] . '"}';<span>//</span><span>jason格式</span><span>break</span><span>; } } </span><span>echo</span><span>$result</span><span>; } </span><span>//</span><span>创建员工</span><span>function</span><span> create(){ </span><span>//</span><span>判断信息是否填写完全</span><span>if</span> (!<span>isset</span>(<span>$_POST</span>["name"]) || <span>empty</span>(<span>$_POST</span>["name"<span>]) </span>|| !<span>isset</span>(<span>$_POST</span>["number"]) || <span>empty</span>(<span>$_POST</span>["number"<span>]) </span>|| !<span>isset</span>(<span>$_POST</span>["sex"]) || <span>empty</span>(<span>$_POST</span>["sex"<span>]) </span>|| !<span>isset</span>(<span>$_POST</span>["job"]) || <span>empty</span>(<span>$_POST</span>["job"<span>])) { </span><span>echo</span> '{"success":false,"msg":"参数错误,员工信息填写不全"}'<span>; </span><span>return</span><span>; } </span><span>//</span><span>TODO: 获取POST表单数据并保存到数据库 //提示保存成功</span><span>echo</span> '{"success":true,"msg":"员工:' . <span>$_POST</span>["name"] . ' 信息保存成功!"}'<span>; } </span>?>
4. The following is the form of jQuery
<span><!</span><span>DOCTYPE HTML</span><span>></span><span><</span><span>html</span><span>></span><span><</span><span>head</span><span>></span><span><</span><span>meta </span><span>http-equiv</span><span>="Content-Type"</span><span> content</span><span>="text/html; charset=utf-8"</span><span>></span><span><</span><span>title</span><span>></span>Demo<span></</span><span>title</span><span>></span><span><</span><span>style</span><span>></span><span>body, input, select, button, h1 </span><span>{</span><span> font-size</span><span>:</span><span> 28px</span><span>;</span><span> line-height</span><span>:</span><span>1.7</span><span>;</span><span>}</span><span></</span><span>style</span><span>></span><span></</span><span>head</span><span>></span><span><</span><span>body</span><span>></span><span><</span><span>h1</span><span>></span>员工查询<span></</span><span>h1</span><span>></span><span><</span><span>label</span><span>></span>请输入员工编号:<span></</span><span>label</span><span>></span><span><</span><span>input </span><span>type</span><span>="text"</span><span> id</span><span>="keyword"</span><span>/></span><span><</span><span>button </span><span>id</span><span>="search"</span><span>></span>查询<span></</span><span>button</span><span>></span><span><</span><span>p </span><span>id</span><span>="searchResult"</span><span>></</span><span>p</span><span>></span><span><</span><span>h1</span><span>></span>员工新建<span></</span><span>h1</span><span>></span><span><</span><span>label</span><span>></span>请输入员工姓名:<span></</span><span>label</span><span>></span><span><</span><span>input </span><span>type</span><span>="text"</span><span> id</span><span>="staffName"</span><span>/><</span><span>br</span><span>></span><span><</span><span>label</span><span>></span>请输入员工编号:<span></</span><span>label</span><span>></span><span><</span><span>input </span><span>type</span><span>="text"</span><span> id</span><span>="staffNumber"</span><span>/><</span><span>br</span><span>></span><span><</span><span>label</span><span>></span>请选择员工性别:<span></</span><span>label</span><span>></span><span><</span><span>select </span><span>id</span><span>="staffSex"</span><span>></span><span><</span><span>option</span><span>></span>女<span></</span><span>option</span><span>></span><span><</span><span>option</span><span>></span>男<span></</span><span>option</span><span>></span><span></</span><span>select</span><span>><</span><span>br</span><span>></span><span><</span><span>label</span><span>></span>请输入员工职位:<span></</span><span>label</span><span>></span><span><</span><span>input </span><span>type</span><span>="text"</span><span> id</span><span>="staffJob"</span><span>/><</span><span>br</span><span>></span><span><</span><span>button </span><span>id</span><span>="save"</span><span>></span>保存<span></</span><span>button</span><span>></span><span><</span><span>p </span><span>id</span><span>="createResult"</span><span>></</span><span>p</span><span>></span><span><</span><span>script </span><span>src</span><span>="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.js"</span><span>></</span><span>script</span><span>></span><span><</span><span>script</span><span>></span><span>$(document).ready(</span><span>function</span><span>(){ $(</span><span>"</span><span>#search</span><span>"</span><span>).click(</span><span>function</span><span>(){ $.<strong>ajax</strong>({ type: </span><span>"</span><span>GET</span><span>"</span><span>, url: </span><span>"</span><span>serverjson2.php?number=</span><span>"</span><span>+</span><span> $(</span><span>"</span><span>#keyword</span><span>"</span><span>).val(), dataType: </span><span>"</span><span>json</span><span>"</span><span>, success: </span><span>function</span><span>(data) { </span><span>if</span><span> (data.success) { $(</span><span>"</span><span>#searchResult</span><span>"</span><span>).html(data.msg); } </span><span>else</span><span> { $(</span><span>"</span><span>#searchResult</span><span>"</span><span>).html(</span><span>"</span><span>出现错误:</span><span>"</span><span>+</span><span> data.msg); } }, error: </span><span>function</span><span>(jqXHR){ alert(</span><span>"</span><span>发生错误:</span><span>"</span><span>+</span><span> jqXHR.status); }, }); }); $(</span><span>"</span><span>#save</span><span>"</span><span>).click(</span><span>function</span><span>(){ $.<strong>ajax</strong>({ type: </span><span>"</span><span>POST</span><span>"</span><span>, url: </span><span>"</span><span>serverjson.php</span><span>"</span><span>, data: { name: $(</span><span>"</span><span>#staffName</span><span>"</span><span>).val(), number: $(</span><span>"</span><span>#staffNumber</span><span>"</span><span>).val(), sex: $(</span><span>"</span><span>#staffSex</span><span>"</span><span>).val(), job: $(</span><span>"</span><span>#staffJob</span><span>"</span><span>).val() }, dataType: </span><span>"</span><span>json</span><span>"</span><span>, success: </span><span>function</span><span>(data){ </span><span>if</span><span> (data.success) { $(</span><span>"</span><span>#createResult</span><span>"</span><span>).html(data.msg); } </span><span>else</span><span> { $(</span><span>"</span><span>#createResult</span><span>"</span><span>).html(</span><span>"</span><span>出现错误:</span><span>"</span><span>+</span><span> data.msg); } }, error: </span><span>function</span><span>(jqXHR){ alert(</span><span>"</span><span>发生错误:</span><span>"</span><span>+</span><span> jqXHR.status); }, }); }); }); </span><span></</span><span>script</span><span>></span><span></</span><span>body</span><span>></span><span></</span><span>html</span><span>></span>
<?<span>php </span><span>//</span><span>设置页面内容是html编码格式是utf-8 //header("Content-Type: text/plain;charset=utf-8"); </span><span>header</span>('Access-Control-Allow-Origin:*'<span>); </span><span>header</span>('Access-Control-Allow-Methods:POST,GET'<span>); </span><span>header</span>('Access-Control-Allow-Credentials:true'<span>); </span><span>header</span>("Content-Type: application/json;charset=utf-8"<span>); </span><span>//</span><span>header("Content-Type: text/xml;charset=utf-8"); //header("Content-Type: text/html;charset=utf-8"); //header("Content-Type: application/javascript;charset=utf-8"); //定义一个多维数组,包含员工的信息,每条员工信息为一个数组</span><span>$staff</span> = <span>array</span><span> ( </span><span>array</span>("name" => "洪七", "number" => "101", "sex" => "男", "job" => "总经理"), <span>array</span>("name" => "郭靖", "number" => "102", "sex" => "男", "job" => "开发工程师"), <span>array</span>("name" => "黄蓉", "number" => "103", "sex" => "女", "job" => "产品经理"<span>) ); </span><span>//</span><span>判断如果是get请求,则进行搜索;如果是POST请求,则进行新建 //$_SERVER是一个超<strong>全局变量</strong>,在一个脚本的全部作用域中都可用,不用使用global关键字 //$_SERVER["REQUEST_METHOD"]返回访问页面使用的请求方法</span><span>if</span> (<span>$_SERVER</span>["REQUEST_METHOD"] == "GET"<span>) { search(); } </span><span>elseif</span> (<span>$_SERVER</span>["REQUEST_METHOD"] == "POST"<span>){ create(); } </span><span>//</span><span>通过员工编号搜索员工</span><span>function</span><span> search(){ </span><span>//</span><span>检查是否有员工编号的参数 //isset检测变量是否设置;empty判断值为否为空 //超<strong>全局变量</strong> $_GET 和 $_POST 用于收集表单数据</span><span>if</span> (!<span>isset</span>(<span>$_GET</span>["number"]) || <span>empty</span>(<span>$_GET</span>["number"<span>])) { </span><span>echo</span> '{"success":false,"msg":"参数错误"}'<span>; </span><span>return</span><span>; } </span><span>//</span><span>函数之外声明的变量拥有 Global 作用域,只能在函数以外进行访问。 //global 关键词用于访问函数内的<strong>全局变量</strong></span><span>global</span><span>$staff</span><span>; </span><span>//</span><span>获取number参数</span><span>$number</span> = <span>$_GET</span>["number"<span>]; </span><span>$result</span> = '{"success":false,"msg":"没有找到员工。"}'<span>; </span><span>//</span><span>遍历$staff多维数组,查找key值为number的员工是否存在,如果存在,则修改返回结果</span><span>foreach</span> (<span>$staff</span><span>as</span><span>$value</span><span>) { </span><span>if</span> (<span>$value</span>["number"] == <span>$number</span><span>) { </span><span>$result</span> = '{"success":true,"msg":"找到员工:员工编号:' . <span>$value</span>["number"] . ',员工姓名:' . <span>$value</span>["name"] . ',员工性别:' . <span>$value</span>["sex"] . ',员工职位:' . <span>$value</span>["job"] . '"}'<span>; </span><span>break</span><span>; } } </span><span>echo</span><span>$result</span><span>; } </span><span>//</span><span>创建员工</span><span>function</span><span> create(){ </span><span>//</span><span>判断信息是否填写完全</span><span>if</span> (!<span>isset</span>(<span>$_POST</span>["name"]) || <span>empty</span>(<span>$_POST</span>["name"<span>]) </span>|| !<span>isset</span>(<span>$_POST</span>["number"]) || <span>empty</span>(<span>$_POST</span>["number"<span>]) </span>|| !<span>isset</span>(<span>$_POST</span>["sex"]) || <span>empty</span>(<span>$_POST</span>["sex"<span>]) </span>|| !<span>isset</span>(<span>$_POST</span>["job"]) || <span>empty</span>(<span>$_POST</span>["job"<span>])) { </span><span>echo</span> '{"success":false,"msg":"参数错误,员工信息填写不全"}'<span>; </span><span>return</span><span>; } </span><span>//</span><span>TODO: 获取POST表单数据并保存到数据库 //提示保存成功</span><span>echo</span> '{"success":true,"msg":"员工:' . <span>$_POST</span>["name"] . ' 信息保存成功!"}'<span>; } </span>?>
The above introduces the PHP parameter passing method 1-ajax, including the relevant content. I hope it will be helpful to friends who are interested in PHP tutorials.