1、ajax一般用于当前页面,不实现页面跳转
2、ajax端:怎样异步得监听服务器端的状态呢?通过onreadystatechange监听readystate属性
request.onreadystatechange = function() {
<span>if (request.readyState===4) {</span>
open()
)。send()
)。所以一般都是判断等于4之后进行相应的操作。
但注意这个和request的status是不一样的
比如readystate=4但是status=404表示响应完成但是响应的内容是没有找到文件
所以一般做法是==200的时候返回内容,其他就显示发声错误即可。
注意在post请求中要设置url 成encode,及url解码,否则不能正确给出结果
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
但是url解码会有一个问题,由于进行urlencoded的时候加号会自动解码成空格,&会被解码成变量连接符,所以如果出现这些字符必须要进行转码
(在做canvas上传图片的url的时候遇到了这个问题)
Pic = Pic.replace(/\+/g, "%2B");
Pic = Pic.replace(/\&/g, "%26");
<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在百度可以找到</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> <strong><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></strong><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、响应server代码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是一个超全局变量,在一个脚本的全部作用域中都可用,不用使用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判断值为否为空 //超全局变量 $_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 关键词用于访问函数内的全局变量</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、下面是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>(){ $.ajax({ 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>(){ $.ajax({ 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是一个超全局变量,在一个脚本的全部作用域中都可用,不用使用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判断值为否为空 //超全局变量 $_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 关键词用于访问函数内的全局变量</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>?>