ajax即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。
ajax = 异步 JavaScript和XML(标准通用标记语言的子集)。
ajax 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换,ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
传统的网页(不使用 ajax)如果需要更新内容,必须重载整个网页页面。异步请求(XMLHttpRequest对象),局部刷新(本质是js dom)
ajax的用途还有填写表单时候自动判断用户名是否重复,比如你写博客写到一半突然电脑重启了,可以恢复你写了一半的内容。
get用于获取数据,有字数限制,请求提包括在url中,post无限制,用于修改服务器的内容。
get是安全的请求,需要保证不修改信息。
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");
3、服务器通过echo来返回给传递ajax的界面。
(提示:zendstudio内置的浏览器对于ajax的页面总是会显示上一次的页面,所以改成在外置浏览器里运行
preference-general-web browser里面设置。)
如果只返回一行简单的,可以不用jason,jason可以更方便返回不同键值的数据。
<span> 1</span><span><span>DOCTYPE HTML</span><span>></span><span> 2</span><span><span>html</span><span>></span><span> 3</span><span><span>head</span><span>></span><span> 4</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>title</span><span>></span>Demo<span></span><span>title</span><span>></span><span> 6</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>body</span><span>></span><span>15</span><span>16</span><span><span>h1</span><span>></span>员工查询<span></span><span>h1</span><span>></span><span>17</span><span>18</span><span><span>label</span><span>></span>请输入员工编号:<span></span><span>label</span><span>></span><span>19</span><span><span>input </span><span>type</span><span>="text"</span><span> id</span><span>="keyword"</span><span>/></span><span>20</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>p </span><span>id</span><span>="searchResult"</span><span>></span><span>p</span><span>></span><span>22</span><span>23</span><span><span>h1</span><span>></span>员工新建<span></span><span>h1</span><span>></span><span>24</span><span><span>label</span><span>></span>请输入员工姓名:<span></span><span>label</span><span>></span><span>25</span><span><span>input </span><span>type</span><span>="text"</span><span> id</span><span>="staffName"</span><span>/><span>br</span><span>></span><span>26</span><span><span>label</span><span>></span>请输入员工编号:<span></span><span>label</span><span>></span><span>27</span><span><span>input </span><span>type</span><span>="text"</span><span> id</span><span>="staffNumber"</span><span>/><span>br</span><span>></span><span>28</span><span><span>label</span><span>></span>请选择员工性别:<span></span><span>label</span><span>></span><span>29</span><span><span>select </span><span>id</span><span>="staffSex"</span><span>></span><span>30</span><span><span>option</span><span>></span>女<span></span><span>option</span><span>></span><span>31</span><span><span>option</span><span>></span>男<span></span><span>option</span><span>></span><span>32</span><span></span><span>select</span><span>><span>br</span><span>></span><span>33</span><span><span>label</span><span>></span>请输入员工职位:<span></span><span>label</span><span>></span><span>34</span><span><span>input </span><span>type</span><span>="text"</span><span> id</span><span>="staffJob"</span><span>/><span>br</span><span>></span><span>35</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>p </span><span>id</span><span>="createResult"</span><span>></span><span>p</span><span>></span><span>37</span><span>38</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></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></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是一个超<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、下面是jQuery的形式
<span><span>DOCTYPE HTML</span><span>></span><span><span>html</span><span>></span><span><span>head</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>title</span><span>></span>Demo<span></span><span>title</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>body</span><span>></span><span><span>h1</span><span>></span>员工查询<span></span><span>h1</span><span>></span><span><span>label</span><span>></span>请输入员工编号:<span></span><span>label</span><span>></span><span><span>input </span><span>type</span><span>="text"</span><span> id</span><span>="keyword"</span><span>/></span><span><span>button </span><span>id</span><span>="search"</span><span>></span>查询<span></span><span>button</span><span>></span><span><span>p </span><span>id</span><span>="searchResult"</span><span>></span><span>p</span><span>></span><span><span>h1</span><span>></span>员工新建<span></span><span>h1</span><span>></span><span><span>label</span><span>></span>请输入员工姓名:<span></span><span>label</span><span>></span><span><span>input </span><span>type</span><span>="text"</span><span> id</span><span>="staffName"</span><span>/><span>br</span><span>></span><span><span>label</span><span>></span>请输入员工编号:<span></span><span>label</span><span>></span><span><span>input </span><span>type</span><span>="text"</span><span> id</span><span>="staffNumber"</span><span>/><span>br</span><span>></span><span><span>label</span><span>></span>请选择员工性别:<span></span><span>label</span><span>></span><span><span>select </span><span>id</span><span>="staffSex"</span><span>></span><span><span>option</span><span>></span>女<span></span><span>option</span><span>></span><span><span>option</span><span>></span>男<span></span><span>option</span><span>></span><span></span><span>select</span><span>><span>br</span><span>></span><span><span>label</span><span>></span>请输入员工职位:<span></span><span>label</span><span>></span><span><span>input </span><span>type</span><span>="text"</span><span> id</span><span>="staffJob"</span><span>/><span>br</span><span>></span><span><span>button </span><span>id</span><span>="save"</span><span>></span>保存<span></span><span>button</span><span>></span><span><span>p </span><span>id</span><span>="createResult"</span><span>></span><span>p</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>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></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></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>?>
以上就介绍了php传参方式1--ajax,包括了方面的内容,希望对PHP教程有兴趣的朋友有所帮助。