前端复习之Ajax，忘完了

1 *  Day01：
2 * Ajax3 * Asynchronous JavaScript and XML4 * 直译中文 - JavaScript和XML的异步5 * （不严格的定义）客户端与服务器端进行交互，而无需刷新当前页面的技术，称之为Ajax6 * Ajax实现的是B/S架构下的异步交互7 * 实现异步交互的技术8   * <iframesrc="">元素9 * 同步与异步的区别10 * 同步交互 - 客户端向服务器发送请求，到服务器端进行响应，这个过程中，用户是不能做任何其他事情的11 * 执行速度相对比较慢12 * 响应的是完整的HTML代码13 * 异步交互 -  客户端向服务器端发送请求，直到服务器端进行响应，这个过程中，用户可以做任何其他事情的14 * 执行速度相对比较快15 * 响应的是部分数据16 * Ajax具有核心对象17 * XMLHttpRequest对象18 * 创建XMLHttpRequest对象19 *20 * 属性21 * readyState - 表示当前服务器的通信状态22 * 0 - （服务器端）尚未初始化23 * 1 - （服务器端）正在接收24 * 2 - （服务器端）接收完毕25 * 3 - （服务器端）正在响应26 * 4 - （服务器端）响应完毕27 * status28 * 200 - 请求成功29 * 404 - 网页找不到30 * 500 - 服务器端的错误31 * 方法32 * open(method，URL) - 与服务器端建立连接33 * send() - 向服务器端发送请求34 * 事件35 * onreadystatechange36 * 作用 - 监听服务器端的通信状态改变37 * 实现Ajax异步交互步骤：38 1.创建XMLHttpRequest核心对象39 固定方法40 function getXhr(){41 var xhr=null;42 if(window.XMLHttpRequest){43 xhr=new XMLHttpRequest();44 }else{45 xhr=new ActiveXObject("Microsoft.XMLHttp");46 }47 return xhr;48 }49 2.与服务器建立连接50 * 使用XMLHttpRequest对象的open(method,url)方法51 * method - 设置当前请求的类型52 * GET -53 * POST -54 * url - 设置当前请求的地址55 3.向服务发送请求56 * 使用XMLHttpRequest对象的send(请求参数)方法57 * 请求参数格式为 - key=value58 * GET - send(null)59 * send()方法不起作用60 * 请求数据 - 增加在URL？key=value61 * POST - send()62 * 在send()方法调用前，调用setRequestHeader()方法63 xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");64 4.接受服务器端的响应数据65 * 使用XMLHttpRequest对象的onreadystatechange事件，监听服务器端的通信状态66 * 使用XMLHttpRequest对象的readystate属性，判断服务器的当前状态(0-4)67 * 使用XMLHttpRequest对象的status属性，判断服务器端的状态码（200）68 * 使用XMLHttpRequest对象的responseText属性，接受服务器端的响应数据69 * GET与POST的区别70 * GET请求类型71 * send()方法不起作用，但是不能被省略72 xhr.send(null);73 * 请求参数 - 添加到url?key=value74 * POST请求类型75 * send()方法起作用76 * 在send()方法被调用前，使用setRequestHeader()方法设置请求头信息77 xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");78 * 使用Ajax的原则79 * 小则怡情，大则上身80 * 另外的实现ajax的步骤81 * 创建XMLHttpRequest对象82 * 注册监听83 * 建立链接84 * 发送请求85 *

1.get请求类型的异步交互

1 <?php2 //用于处理客户端的Ajax交互3 //1.接收客户端发送的请求数据4 $user=$_GET['user'];5 //2.向客户端进行响应6 echo 'get request successful';7 ?>

1 <body>
2   <inputtype="button"value="异步请求"id="btn">
3   <script>
4     //实现Ajax交互的步骤
5     varbtn=document.getElementById("btn");6 btn.onclick=function(){7     /*
8 * 1.实现Ajax主要依靠XMLHttpRequest对象9 *  * 创建XMLHttpRequest对象10 *11      */
12     varxhr=getXhr();13      /*
14 * 2.与服务器端建立连接15 * * open(method,url,async)方法16 *  * method - 设置当前请求的类型（ＧＥＴ或ＰＯＳＴ）17 *  * url - 设置当钱的请求类型18 *  * async - 设置是否异步（Boolean）19 *   * 默认为true20 *  * 官方认为XMLHttpRequest就用来实现交互的，为false的话，报错21       */
22 xhr.open("get","01.php?user=zhangwuji",true)23       /*
24 * 3.客户端向服务器端发送请求25 * * send(请求参数)方法26 *  * 请求参数的格式 - key=value27 * * 如果请求类型为GET方式的话28 *  * send()方法是不能向服务器发送请求数据的29 * * 注意30 *  * send()方法是不能省略的31 *   * GET 请求类型 - send(NULL)32        */
33 xhr.send(null);34        /*
35 * 4.客户端接收服务器端的响应36 * * 使用onreadystatechange事件 -37 *  *监听服务器38 * * readyState属性39 *  * 得到服务器端当前通信状态40 *  * 备选项41 *   * 0 尚未初始化（服务器端）42 *   * 1 正在发送请求43 *   * 2 请求完成44 *   * 3 正在响应45 *   * 4 响应完成46 *  * status-状态码47 *   * 200 OK48 *  * responseText属性49 *   * 接受服务器端的数据（HTML格式）50         */
51 xhr.onreadystatechange=function(){52             //alert(xhr.readyState);
53             if(xhr.readyState==4){54                 //alert(xhr.status);
55                 if(xhr.status==200&&xhr.status<300||xhr.status==3){56                     //接受服务器端的数据
57                     vardata=xhr.responseText;58 console.log(data);59 }60 }61 }62 }63      functiongetXhr(){64         varxhr=null;65         if(window.XMLHttpRequest){66 xhr=newXMLHttpRequest();67 }else{68 xhr=newActiveXObject("Microsoft.XMLHttp");69 }70         returnxhr;71 }72   </script>
73  </body>

1 // 2.post请求类型的异步交互 <?php2 //1.接受客户端发送的请求3 $user=$_POST['user'];4 //2.进行响应5 echo $user.'post request successful';6 ?>

1 <body>
2   <inputtype="button"value="异步"id="btn">
3   <script>
4     varbtn=document.getElementById("btn");5 btn.onclick=function(){6         //实现Ajax的异步交互
7         varxhr=getXhr();8 xhr.open("post","02.php",true);9         /*
10 * 如果Ajax使用post请求类型的话11 * * 必须在send()方法调用之前12 * * 使用setRequestHeader（key,value)方法13 *  * 该方法用于设置请求头14          */
15 xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");16 xhr.send("user=zhangwuji");17 xhr.onreadystatechange=function(){18             if(xhr.readyState==4){19                 if(xhr.status==200){20                     vardata=xhr.responseText21 console.log(data);22 }23 }24 }25 }26     functiongetXhr(){27         varxhr=null;28         if(window.XMLHttpRequest){29 xhr=newXMLHttpRequest();30 }else{31 xhr=newActiveXObject("Microsoft.XMLhttp");32 }33         returnxhr;34 }35   </script>
36  </body>

1 //3.表单的异步交互<?php2 $user=$_POST['user'];3 $pwd=$_POST['pwd'];4
5 if($user=='admin'&&$pwd=='admin'){6 echo 'login successful';7 }else{8 echo 'login error';9 }10 ?>

1 <body>
2   <formid="myform"name="myform"action="03.php"method="post">
3     用户名：<inputtype="text"id="user"name="user"><br>
4     密码：<inputtype="text"id="pwd"name="pwd"><br>
5   <inputtype="button"id="btn"value="登录">
6   </form>
7   <script>
8     /*
9 * <form>表单元素，存在submit按钮，提交表单10 * 使用Ajax提交表单的话，不需要submit11 *12 *13      */
14      //1.位button按钮绑定onclick事件
15      varbtn=document.getElementById("btn");16 btn.onclick=function(){17         //使用Ajax实现表单提交
18         varxhr=getXhr();19 xhr.open("post","03.php");20 xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");21         //send发送用户名和密码
22         varuser=document.getElementById("user").value;23         varpwd=document.getElementById("pwd").value;24
25 xhr.send("user="+user+"pwd="+pwd);26 xhr.onreadystatechange=function(){27             if(xhr.readyState==4&&xhr.status==200){28                 vardata=xhr.responseText;29 console.log(data);30 }31 }32 }33      functiongetXhr(){34 xhr=null;35         if(window.XMLHttpRequest){36 xhr=newXMLHttpRequest();37 }else{38 xhr=newActiveXObject("Microsoft.XMLHttp");39 }40         returnxhr;41 }42   </script>
43  </body>

4.普通二级联动与异步交互的二级联动

1 <body>
2  <selectid="province">
3     <option>请选择</option>
4     <option>山东省</option>
5     <option>陕西省</option>
6     <option>吉林省</option>
7  </select>
8
9  <selectid="city">
10     <option>请选择</option>
11  </select>
12   <script>
13   //1.为SELECT元素绑定onchange事件
14   varprovinceEle=document.getElementById("province");15 provinceEle.onchange=function(){16     //2.获取用户当前选择的省份名称
17     //3.创建对应的城市列表 - 数组
18     //遍历城市列表
19         //4.创建<option>元素
20         //5.将城市的信息添加到<option>元素上
21         //6.将创建的所有<option>元素添加到ID为city的元素上
22
23     varcity=document.getElementById("city");24     varopts=city.getElementsByTagName("option");25     for(varz=opts.length-1;z>0; z--)26 {   //将id为city的元素内容清空27 city.removeChild(opts[z]);28 }29
30     varprovince=provinceEle.value;31
32     varcities=[];33     switch(province){34         case "山东省":35 cities=["青岛市","济南市","威海市","日照市"];36             break;37         case "陕西省":38 cities=["榆林市","神木","绥德","子州"];39             break;40         case "吉林省":41 cities=["长春市","松原市","通化市","四平市"];42             break;43 }44     for(vari=0;i<cities.length ;i++)45 {46         varoption=document.createElement("opotion");47         vartextNode=document.createTextNode(cities[i]);48 option.appendChild(textNode);49 alert(textNode);50         //var city=document.getElementById("city");
51 city.appendChild(option);52 }53 }54   </script>
55  </body>

1 <?php2 //用于处理客户端的请求二级联动的数据3 //1，接收客户端发送的省份信息4 $province=$_POST['province'];5 //echo $province;6 //2.判断当前的省份信息，提供不同的城市信息7 switch($province){8 case '山东省':9 echo '青岛市,济南市,威海市,日照市';10 break;11 case '陕西省':12 echo '榆林,神木,绥德,子州';13 break;14 case '吉林省':15 echo '长春市,松原市,通化市,四平市';16 break;17 }18 //服务器端响应的是一个字符串19 ?>

1 <body>
2    <selectid="province">
3     <option>请选择</option>
4     <option>山东省</option>
5     <option>陕西省</option>
6     <option>吉林省</option>
7  </select>
8
9  <selectid="city">
10     <option>请选择</option>
11  </select>
12  <script>
13     varprovinceEle=document.getElementById("province");14 provinceEle.onchange=function(){15         //清空
16         varcity=document.getElementById("city");17         varopts=city.getElementsByTagName("option");18         for(varz=opts.length-1;z>0;z--){19 city.removeChild(opts[z]);20 }21
22         if(provinceEle.value!="请选择"){23         //执行ajax异步请求
24         varxhr=getXhr();25 xhr.open("post","6.php",true);26 xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");27 xhr.send("province="+provinceEle.value);28 xhr.onreadystatechange=function(){29             if(xhr.readyState==4&&xhr.status==200){30                 //接收服务器端的数据内容
31                 vardata=xhr.responseText;32                 //data是字符串，转化为
33                 //console.log(data);
34                 varcities=data.split(",");console.log(cities[i]);35 console.log(cities);36                 for(vari=0;i<cities.length;i++){37                     varoption=document.createElement("option");38                     vartextNode=document.createTextNode(cities[i]);39
40 option.appendChild(textNode);41
42                     //var city=document.getElementById("city");
43
44 city.appendChild(option);45 }46 }47 }48 }49 console.log(city);50 }51     functiongetXhr(){52         varxhr=null;53         if(window.XMLHttpRequest){54 xhr=newXMLHttpRequest();55 }else{56 xhr=newActiveXObject("Microsoft.XMLHttp");57 }58         returnxhr;59 }60  </script>
61  </body>

1 <?php2 //接收客户端发送的请求数据state3 $state=$_REQUEST['state'];4 //判断state5 if($state==1){//获取省份6 echo '山东省,陕西省,吉林省';7 }else if($state==2){//获取城市8
9 $province=$_POST['province'];10 switch($province){11 case '山东省':12 echo '青岛市,济南市,威海市,日照市';13 break;14 case '陕西省':15 echo '榆林,神木,绥德,子州';16 break;17 case '吉林省':18 echo '长春市,松原市,通化市,四平市';19 break;
21 }22 }
26 ?>

1  <body>
2   <selectid="province">
3     <option>请选择</option>
4  </select>
5
6  <selectid="city">
7     <option>请选择</option>
8  </select>
9  <script>
10     varxhr=getXhr();11     //第一次执行ajax异步请求 - 省份
12 window.onload=function(){13
14 xhr.open("get","08.php?state=1");15 xhr.send(null);16 xhr.onreadystatechange=function(){17         if(xhr.readyState==4&&xhr.status==200){18             vardata=xhr.responseText;19             varprovinces=data.split(",");20             for(vari=0;i<provinces.length;i++){21                 varoption=document.createElement("option");22                 vartext=document.createTextNode(provinces[i]);23 option.appendChild(text);24                 varprovince=document.getElementById("province");25 province.appendChild(option);26 }27 }28 }29 }30     //第二次执行Ajax异步请求 - 城市
31     varprovince=document.getElementById("province");32 province.onchange=function(){33 xhr.open("post","08.php?state=2",true);34 xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");35
36         //console.log(provinceEle.value);
37 xhr.send("province="+province.value);38 xhr.onreadystatechange=function(){39             if(xhr.readyState==4&&xhr.status==200){40                 vardata=xhr.responseText;41 console.log(data);42                 varcities=data.split(",");43                 for(vari=0;i<cities.length;i++){44                     varoption=document.createElement("option");45                     vartext=document.createTextNode(cities[i]);46 option.appendChild(text);47                     varcity=document.getElementById("city");48 city.appendChild(option);49 }50 }51 }52 }53     functiongetXhr(){54         varxhr=null;55         if(window.XMLHttpRequest){56 xhr=newXMLHttpRequest();57 }else{58 xhr=newActiveXObject("Microsoft.XMLHttp");59 }60         returnxhr;61 }62  </script>

Day02：

1 Day 02:2 * 接收服务器端的响应数据3 * 使用XMLHttpRequest核心对象的responseText属性4 * 该属性只能接收文本(HTML)格式5 * 问题6 * 解析过程比较复杂（拆串）7 * 拆串或拼串极容易出错8 * XML格式9 * 基本内容10 * HTML XHTML dhtml XML的区别11 * HTML就是网页 - 元素定义大小写12 * XHTML就是严格意义的HTML - 元素定义小写13 * DHTML - BOM|DOM14 * XML - 配置文件|数据格式15 * XML文件的扩展名为".xml"16 * XML的定义方式与HTML非常相似17 * HTML的元素预定义好的18 * XML允许自定义元素19 * XML的版本20 * 1.0版本 -21 * 1.1版本 - 几乎没人用22 * 版本不会再更xin23 * XML的作用24 * 作为数据格式 - 存储数据25 * XML语法26 * 声明27       <?xml version="1.0"  encoding="UTF-8"?>
28 * version - 设置当前XML文件的版本29 * encoding - 设置当前XML文件的编码30 * 注意 - 必须出现在0行0列上31 * 定义元素32 * 根元素33 * 必须是起始标签34 * 只能定义一个35 * 定义元素36 * 元素名可以自定义37 * 分类38 * 起始标签或单标签39 * 定义属性40 * 定义注释41 *42 *43 *44 * DOM解析XML45 * 创建XML的解析器46
47 function parseXML(){48 var xmlDoc=null;49 if(window.DOMParser){50 //其他浏览器51 var parser=new DOMParser();52 xmlDoc=parser.parseFromString("02.xml","application/xml");53 }else{54 //IE浏览器55 var parser=new ActiveXObject("Microsoft.XMLDOM");56 //异步57 parser.async="false";58 xmlDoc= parser.loadXML("02.xml");59 }60 return xmlDoc;61
62 }63 * 解析XML与解析HTML一致64 * 很少使用ById和ByName两个方法65 * 注意66 * 浏览器不允许读取外部的XML文件67 * 浏览器解析符合XML格式的字符串68 *69 * Ajax中的XML格式70 * 请求的数据格式 - XML71 * 客户端如何构建符合XML格式的数据72 * 构建的数据类型 - 字符串（string）类型73 * 字符串的内容符合XML格式的语法要求74 * 服务器端如何接收符合XML的数据75 * 接收客户端的请求数据 - 字符串（string类型）76 * PHP继承了DOM的相关内容77 * DOMDocument78 * DOMElement79 * DOMNode80 * 响应的数据格式 - xml81 * 服务器端如何构建符合XML格式的数据82 * 设置服务器端的响应头"Content-Type"值为"text/xml"83 * 构建一个符合XML格式的字符串（string）类型84 * 手动方式构建字符串string85 * DOMDOcument对象的方法86 * loadXML(符合XML格式的字符串)87 * saveXML()方法进行响应88 * 客户端如何接收符合XML格式的数据89 * 使用XMLHttpRequest对象的responseText属性接收90 * 接收回来的是XML DOM对象（不需要使用XML解析器解析）91 * JSON格式92 * 基本内容93 * JSON - Javascript Object Notation（JS原生支持）94 * JSON的结构95 * Array96 * Object97 * 支持的数据类型98 * String字符串99 * Number数值100 * Boolean101 * Object102 * Array103 * null104 * Ajax中的JSON格式105 * 请求格式为JSON106 * 客户端向服务器断发送请求 - JSON格式的数据107 * 构建符合JSON格式的字符串108 * 保证定义字符串时，使用单引号（里面使用双引号）109 * 服务器端接收110 * 接收客户端的数据111 * 使用json_decode()函数进行解析112 json_decode($json,true)113 * 响应格式为JSON114 * 服务器端向客户端发送响应为JSON格式的数据115 * 使用json_encode()函数将PHP变量（array）转换为符合JSON格式的字符串116 * 客户端接收JSON格式的数据117 * 使用XMLHttpRequest对象的responseText属性接收118 * 没有responseJSON属性119 * 使用eval()函数进行转换120
121 * HTML（文本格式）、XML格式、JSON格式的优缺点122 * HTML123 * 优点 - 简单124 * 缺点 - 解析复杂125 * XML126 * 优点 - 易于构建复杂数据127 * 缺点 - 构建、解析复杂128 * JSON129 * 优点 - 轻量级130 * 缺点 - 可能转换失败131   }]'  3.在PHP中如何将数组转换成JSON字符串？   通过json_encode(数组)  4.前端页面将取回的JSON字符串转换成js对象/数组   通过JSON.parse(数据)

1 //02.xml文件 <?xml version="1.0"  encoding="ISO-8859-1"?>
3 <users>
4     <!--这是注释-->
5     <userid="01">
6         <name>zhangsanfeng</name>
7         <age>18</age>
8         <job>jiaozhudie</job>
9         <addr>guangingding</addr>
10         <love/>
11     </user>
12     <userid="02">
13         <name>zhangsanzhu</name>
14         <age>19</age>
15         <job>eat</job>
16         <addr>154</addr>
17         <love/>
18     </user>
19 </users>

1 <script>
2     functionparseXML(xml){3         varxmlDoc=null;4         if(window.DOMParser){5             //其他浏览器
6             varparser=newDOMParser();7 xmlDoc=parser.parseFromString("02.xml","application/xml");8 }else{9             //IE浏览器
10             varparser=newActiveXObject("Microsoft.XMLDOM");11             //异步
12             //parser.async=false;
13 xmDoc.async=false;14 xmlDoc=parser.loadXML("02.xml");15 }16         returnxmlDoc;17
18 }19      varxmlDoc=parseXML("<user id='01'><name>zhangsanfeng</name></user>");20
21      varuserEle=xmlDoc.getElementsByTagName("user")[0];22      varnameEle=userEle.getAttribute("name");/*????????????????????*/
23      varnameTxt=nameEle.childNodes[0].nodeValue;24 console.log(nameTxt);25   </script>

1 /03.xml<?xml version="1.0"  encoding="utf-8"?>
2 <china>
3    <provinceid="01"name="山东省">
4         <cities>
5             <city>青岛市</city>
6             <city>济南市</city>
7             <city>威海市</city>
8             <city>日照市</city>
9             <city>德州市</city>
10         </cities>
11     </province>
12     <provincename="辽宁省">
13         <cities>
14             <city>大连市</city>
15             <city>沈阳市</city>
16             <city>铁岭市</city>
17             <city>锦州市</city>
18             <city>丹东市</city>
19         </cities>
20     </province>
21     <provincename="陕西省">
22         <cities>
23             <city>A市</city>
24             <city>B市</city>
25             <city>C市</city>
26             <city>D</city>
27             <city>E</city>
28         </cities>
29     </province>
30
31 </china>

1 <script>
2  //1.
3     functionparseXML(xml){4         varxmlDoc=null;5         if(window.DOMParser){6             varparser=newDOMParser();7 xmlDoc=parser.parseFromString("03.xml","application/xml");8 }else{9 xmlDoc=newActiveXObject("Microsoft.XMLDOM");10 xmlDoc.async=false;11 xmlDoc.loadXML("03.xml");12 }13         returnxmlDoc;14 }15 //2.
16     varxmlDoc=parseXML('<province id="01" name="山东省"><city name="青岛市"/><city name="济南市"/><city name="威海市"/><city name="日照市"/><city name="德州市"/></province>');17     //a.
18     varproEle=xmlDoc.getElementsByTagName("province")[0];19     varproTxt=proEle.getAttribute("name");20 console.log(proTxt);21     //b.
22     varcitiesEle=xmlDoc.getElementsByTagName("city");//数组
23     for(vari=0;i<citiesEle.length;i++){24         varcityEle=citiesEle[i];25         varcityTxt=cityEle.getAttribute("name");26 console.log(cityTxt);27 }28  </script>

1 <?php2 //接受客户端发送的请求3 $user=$_POST['user'];//符合XML格式要求的string4 //var_dump($user);5
6 //创建DOMDocument对象7 $doc = new DOMDocument();8 //2.调用loadXML（）方法9 $result=$doc->loadXML($user);10 //var_dump($doc);11 //echo $user;12
13
14 //echo $doc->saveXML();15
16 //1.如何构建符合XML格式的数据17 //修改响应头的Content-Type值为"text/xml"18 //header('Content-Type:text/xml');19
20 $doc->saveXML();21 ?>

1 <body>
2   <inputtype="button"value="Ajax"id="btn">
3   <script>
4     varbtn=document.getElementById("btn");5 btn.onclick=function(){6         //实现Ajax的异步交互
7         varxhr=getXhr();8 xhr.open("post","07.php");9 xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");10         /*
11 * 如何构建符合XML格式的请求数据12 * * 注意13 *   * 请求数据的格式 - key=value不能改变的14 * * 将value值构建成符合XML格式的数据15 *   * 数据类型 - 字符串（string）16 *   * 格式符合XML的语法要求17 * * 编写注意18 *   * 定义变量 - 专门构建XML格式的数据19 *   * 在send（）方法进行拼串20          */
21          varuser="<user><name>zhangsanfeng</name><age>18</age></user>";22 xhr.send("user="+user);23 xhr.onreadystatechange=function(){24             if(xhr.readyState==4&&xhr.status==200){25                 //26                 //var data=xhr.responseText;
27                 //console.log(data);
28                 varxmlDoc=xhr.responseXML;29                 varnameEle=xmlDoc.getElementsByTagName("name")[0];30                 vartxtEle=nameEle.childNodes[0];31
32 }33 }34 }35     functiongetXhr(){36         varxhr=null;37         if(window.XMLHttpRequest){38 xhr=newXMLHttpRequest();39 }else{40 xhr=newActiveXObject("Microsoft.XMLHttp");41 }42         returnxhr;43 }44   </script>
45  </body>

Day03:

1 Day 03：2 * jQuery中的Ajax3 * 封装第一层 - 类似于原生Ajax的用法4 * $.ajax() - 最复杂5 * 选项 - 格式是{key:value}6 *   * url - 请求地址7 *   * type - 请求类型，默认get8 *   * async - 是否异步，默认true9 *   * Content-Type  - POST方式发送数据的前提10 * 默认值为application/x-www-form-urlencoded11 *   * data - 请求数据，格式必须为key:value12 *   * success - 请求成功后的回调函数13 * function(data,textStatus){}14 * data - 服务器端响应的数据内容15 * textStatus - 表示ajax请求的状态16 * success17 *   * error - 请求失败后的回调函数18 * function(XMLHttpRequest,textStatus,errorThrown){}19 * XMLHttpRequest - ajax的核心对象20 * textStatus - 表示ajax请求的状态21 * error、timeout、notmodified等22 * errorThrown - 错误异常23 * dataType - 设置响应数据格式24 * 封装第二层 - 基于第一层再次封装25 * load()   - 最简单、局限性最大26 * $().load(url,data,callback)27 *  * url - 必要，设置当前Ajax请求的地址28 *  * data - 可选，设置当前Ajax请求的数据29 * 格式必须是key/value格式30 *  * callback - 可先，当前Ajax请求成功后的回调函数31 * 该回调参数的行参(data)就是服务器端响应的数据内容32 *  * 问题33 * 请求类型由是否发送请求数据决定34 * 没有请求数据时，请求类型是GET35 * 发送请求数据时，请求类似是POST36 * 默认接收服务器端的数据内容37 * 是以字符串类型(HTML格式)进行接收38 * 无法使用XML或JSON格式39 *40 *41 * $.get()  - 请求类型GET42 * $.get(url,data,callback,type)43 *  * url - 设置当前Ajax请求的地址44 *  * data - 设置当前Ajax请求的数据45 * 格式要求为key:value，构建object46 * callback - 当前Ajax请求成功后的回调函数47 * type - 设置服务器端响应的数据格式48 * 默认值 - HTML格式49 * xml - XML格式50 * json - JSON格式51 * 注意52 * 无论是否发送请求数据，请求类型都是GET53 * $.get()方法可以使用HTML格式、XML格式及json格式54 *55 * $.post() - 请求类型是POST56 * 使用方式与$.get()方式一致57 * 封装第三层 - 特殊用法58 * $.getScript() - 动态读取脚步（JavaScript代码）59 * $.getScript(url,callback)60 * * url - 读取脚本的地址61 * * callback - 读取成功后的回调函数62 * function(data){}63 * $.getJSON()   — 接收JSON格式数据64 *65 * 表单的ajax请求66 * 表单的序列化67 *  serialize() - 返回JSON字符串68 * 使用表单元素的name属性69 * {key:value}70 *  seriaizeArray() - 返回JSON对象71 * JSON对象是由一个对象数组组成的72 * [ele1,ele2,ele3,...]73 * 注意74 * 表单中必须有name属性75 * jQuery.form插件76 * 作用 - 实现表单的异步提交77 * 两个核心方法78 * ajaxForm()方法79 * ajaxSubmit()方法 - 使用ajax异步提交表单80 * 底层机制81 * 表单提交机制82 * 表单异步提交的方式83 * 不再使用submit按钮，而使用button按钮84 通过button按钮绑定click事件，实现ajax异步提交85 * 表单的序列化86 * 表单的异步提交87 * 依旧使用submit按钮88       在<form>原素绑定onsubmit事件89 在onsubmit的处理函数中90 * 表单的序列化91 * 表单的异步提交92 * 阻止表单的默认行为（return false）93 * 跨域请求 - $.getJson() 方法94 * 跨域95 * 完全跨域 - IP不同96 * http://www.baidu.com97 * http://www.tedu.coom98 * 跨子域 - IP相同但端口号不同99 * http://127.0.0.1:8000100 * http://127.0.0.1:8888101 * 域名102 * 顶级域名103 * http://baidu.com104 * 二级域名105 * http://wenku.baidu.com106 * http://www.baidu.com/kongjian107 *108 * 万维网协议109 * 默认不允许跨域请求的110 * 实现跨域111 如何实现跨域请求112 * 使用JSONP形式的回调函数来加载其他网域的JSON数据113 * JSONP - JSON with Padding(JSON的一种使用模式)114                * 核心内容 - HTML的<script//>元素具有开放策略115            *实现方式116              *$.getJSON()方法的URL后增加请求数据117 $.getJSON("09.php?callback=?",function(data){});118  *Cookie119    *基本内容120      *浏览器的缓存121        *存储在浏览器内存中122          *关闭浏览器（窗口）后，数据会被自动销毁123        *存储在用户电脑硬盘中124          *关闭浏览器（窗口）后，数据不会销毁125     *Cookie（小甜饼）126       *缓存文件-一些用户数据存储在此127     *问题128       *用户数据是以明码来存储的129       *Cookie谁都可以读取130       *A网站生成的Cookie文件，归属到百度131   *如何操作132     *读取Cookie133     *写入Cookie-将134
135 Ajax PROJECT:136  *Web开发工具137   *webStorm软件138     *webStorm如何创建PHP页面139 注意：webStorm并不支持php140       *下载PHPstorm软件141     *配置php142     *点击工具栏"File"->"SetTing",弹出配置窗口143     *选择“Editor

1// jQuery中的load方法<?php2 //1.接收客户端的请求数据3 $name=$_POST['name'];4 $age=$_POST['age'];5 var_dump($name);6 var_dump($age);7 //2.向客户端进行响应8 //echo 'load sucess';9
10 echo '{"name":"zhuzhuxia","age":"23"}';11 ?>

1  <body>
2     <inputtype="button"id="btn"value="load"/>
3     <div></div>
4     <script>
5 $("#btn").click(function(){6         /*
7 * click事件中，调用load()方法8 * $().load(url,data,callback)9 *  * url - 必要，设置当前Ajax请求的地址10 *  * data - 可选，设置当前Ajax请求的数据11 *    * 格式必须是key/value格式12 *  * callback - 可先，当前Ajax请求成功后的回调函数13 * 该回调参数的行参(data)就是服务器端响应的数据内容14 * 注意15 * 服务器端响应的数据自动写入到<div>元素16 * 现象的原因 - div元素调用load()方法17 * load()方法的请求类型18 * 没有请求数据时，请求类型是GET19 * 发送请求数据时，请求类似是POST20 * load()方法的请求类型由是否发送请求数据来决定21 * load()方法接收服务器短的响应数据22 * 是以字符串类型来接受的23 *24          */
25
26         //请求数据格式为key/value，就是object对象
27
28          varuser={"name":"zhangsanfeng","age":"18"};29 $("div").load("01.php",user,function(data){30              //var json=eval("("+data+")");
31 console.log(data);//只能使用html格式或字符串，JSON不行
32
33 });34 });35     </script>

1 //jQuery中的get方法或post方法<?php2 //1.接收客户端请求的数据3 $name=$_GET['name'];4 $age=$_GET['age'];5 //var_dump($name);6 //2.向客户端进行响应7 //a.响应格式为HTML格式8 //echo 'get success';9 //b.响应格式为XML格式10 //header("Content-Type:text/xml");11 //echo '<user><name>zhuzhuxai</name><age>25</age></user>';12 //c.响应格式为json格式13 echo '{"name":"aboluo","age":"30"}';14 ?>

1 <body>
2    <inputtype="button"id="btn1"value="get"/>
3    <inputtype="button"id="btn2"value="post"/>
4    <script>
5 $("#btn1").click(function(){6             /*
7 * $.get(url,data,callback,type)8 *  * url - 设置当前Ajax请求的地址9 *  * data - 设置当前Ajax请求的数据10 * 格式要求为key:value，构建object11 * callback - 当前Ajax请求成功后的回调函数12 * type - 设置服务器端响应的数据格式13 * 默认值 - HTML格式14 * xml - XML格式15 * json - JSON格式16 * 注意17 * 无论是否发送请求数据，请求类型都是GET18 * $.get()方法可以使用HTML格式、XML格式及json格式19              */
20              varuser={"name":"zhangsangfeng","age":"20"};21 $.get("02.php",user,function(data){22                 //1.console.log(eval("("+data+")"));
23                 //2.
24 console.log(data)25 },"json");26
27 });28    </script>
29
30  </body>

1 //jQuery中的ajax方法<?php2 echo 'post success';3 ?>

1 <body>
2   <inputtype="button"value="ajax"id="btn"/>
3   <script>
4 $("#btn").click(function(){5         /*
6 * $.ajax(options)方法7 * * 选项 - 格式是{key:value}8 *   * url - 请求地址9 *   * type - 请求类型，默认get10 *   * async - 是否异步，默认true11 *   * Content-Type  - POST方式发送数据的前提12 * 默认值为application/x-www-form-urlencoded13 *   * data - 请求数据，格式必须为key:value14 *   * success - 请求成功后的回调函数15 * function(data,textStatus){}16 * data - 服务器端响应的数据内容17 * textStatus - 表示ajax请求的状态18 * success19 *   * error - 请求失败后的回调函数20 * function(XMLHttpRequest,textStatus,errorThrown){}21 * XMLHttpRequest - ajax的核心对象22 * textStatus - 表示ajax请求的状态23 * error、timeout、notmodified等24 * errorThrown - 错误异常25 * dataType - 设置响应数据格式26          */
27         varuser={"name":"zhuzhaxia","age":"26"};28
29 $.ajax({30 url:"04.php",31 type:"post",32 async:true,33 date:user,34 success:function(data,textStatus){35 console.log(data);36 console.log(textStatus);37 },38 error:function(){39 console.log(textStatus);40 console.log(errorThrown);41 }42 });43 });44   </script>
45  </body>

jQuery中的ajax实现简单聊天

1 <body>
2   <inputtype="text"id="chatdata"/>
3   <inputtype="button"id="btn"value="发送"/>
4   <div></div>
5   <script>
6     /*
7 * 需求8 * * 客户端9 * 用户在输入框中输入内容10 * 用户点击发送按钮，使用$.ajax()执行Ajax请求11 * 接收服务器端响应数据写入到<div>元素中12 * 服务器端13 * 接收客户端发送的聊天内容14 * 将聊天内容响应回去（json）格式15 *16 *17      */
18
19     varchatlist="";//不能赋值null
20
21
22 $("#btn").click(function(){23         vardata={"value":$("#chatdata").val()};24
25 $.ajax({26 url:"05.php",27 type:"post",28 async:true,29 data:data,30 dataType:"json",31 success:function(data,textStatus){32                 //console.log(data);
33                 //console.log(textStatus);
34
35 chatlist+="<p>"+data.chat+"</p>";36
37 $("div").html($(chatlist));38 },39             /*error:function(){40 console.log(textStatus);41 console.log(errorThrown);42 }*/
43 });44 });45   </script>

<?php//接收客户端的数据$value=$_POST['value'];//-->key//var_dump($value);//2.进行响应echo '{"chat":"'.$value.'"}';?>

动态读取脚本:

1 <body>
2   <inputtype="button"value="读取"id="btn"/>
3   <divid="comments"></div>
4 <!--这段JS代码在HTML页面加载时被加载-->
5   <!--<script src="script.js"></script>-->
6   <script>
7 $("#btn").click(function(){8         /*
9 * $.getScript(url,callback)10 * * url - 读取脚本的地址11 * * callback - 读取成功后的回调函数12 * function(data){}13          */
14 $.getScript("06.php",function(data){15 console.log(data);16 });17 });18   </script>
19  </body>

<?phpecho '$("#comments").html("<p>zhuzhuxia</p><p>hahaha哈</p>")';
?>

　　表单的AJax请求:

1 <body>
2   <formid="myform"name="myform"action="07.php"method="post">
3     用户名：<inputtype="text"id="username"name="username" ><br>
4     密码：<inputtype="text"id="password"name="password"><br>
5     <inputtype="button"value="登录"id="btn"/>
6
7   </form>
8   <script>
9     /*
10 * 需求11 * * 当用户输入用户名密码，点击登录按钮时12 * * 使用jQuery中的$.post()方法执行ajax的异步请求13 * * 服务器端判断登录是否成功14 *15 *16      */
17 $("#btn").click(function(){18          /*1.data封装表单中的用户名和密码的信息19 var data={20 "username": $("#username").val(),21 "password": $("#password").val()22 };*/
23
24         //2.
25         vardata=$("#myform").serialize();//表单中得定义name属性
26
27         /*
28 * 客户端向服务器端发送的请求数据29 * * 格式要求需为{key:value}30 * * 手工方式构建这种格式的数据31 * 如果这种完成32 * * 无论具有多少表单元素，表单只有一个33 *   只获取表单，通过某种机制自动将表单中所有元素的值，构建成{key:value}格式的数据34 * 表单的序列化35 *  serialize() - JSON字符串36 * 使用表单元素的name属性37 * {key:value}38 *  seriaizeArray() - JSON对象39 * JSON对象是由一个对象数组组成的40 * [ele1,ele2,ele3,...]41          */
42 $.post("07.php",data,function(data){43 console.log(data);44 });45 });46   </script>
47  </body>

1 <?php2 //1.3 $username=$_POST['username'];4 $password=$_POST['password'];5 //2.判断是否登录成功6 if($username=='admin'&&$password=='admin'){7 echo 'login success';8 }else{9 echo 'login error';10 }11 ?>

序列化完成用户注册功能:

1  <body>
2   <formid="regist">
3     用户名：<inputtype="text"name="username"/><br>
4     密码：<inputtype="text"name="password"/><br>
5     确认密码：<inputtype="text"name="repassword"/><br>
6     email:<inputtype="text"name="email"/><br>
7     地址：<inputtype="text"name="addr"/><br>
8     <inputtype="button"value="注册"id="btn"/>
9   </form>
10   <script>
11     //需求 - 表单ajax异步提交，表单序列化
12 $("#btn").click(function(){13         //1.表单序列化
14         vardata=$("#regist").serialize();15         //2.表单异步提交
16 $.post("08.php",data,function(data){17 console.log(data);18 });19 });20   </script>
21  </body>

跨域请求:

1 <body>
2  <!--
3 创建html页面和php页面（模拟）4 * html页面放在一个域5 * php页面放在另一个域6  -->
7   <inputtype="button"value="跨域请求"id="btn"/>
8   <script>
9 $("#btn").click(function(){10         /*
11 * $.getJSON(url,data,callback)方法12 * * URL - 请求地址13 *   data - 请求数据14 *   callback - 请求成功后的回调函数15
16 * 该方法返回的是JSON17
18 如何实现跨域请求19 * 使用JSONP形式的回调函数来加载其他网域的JSON数据20 * JSONP - JSON with Padding(JSON的一种使用模式)21 * 核心内容 - HTML的<script>元素具有开放策略22 * 实现方式23 * $.getJSON()方法的URL后增加请求数据24 url?callnck=?25          */
26 $.getJSON("09.php?callback=?",function(data){27 console.log(data);28 });29 });30   </script>
31  </body>

1 <?php2 //3 //echo '{"msg":"post success."}';4 $callback=$_GET['callback'];5 //2.输出$callback6 //var_dump($callback);7 /*8 * 3.向客户端进行响应 - json9 *  * 如何callback是一个函数的话，假设$callback 就是函数的名称10 *  * 函数的调用体 - $callback(实参)11 * 向该函数传递的参数为实参12 */13 echo $callback.'({"msg":"get success."})';14 ?>

转载于:https://www.cnblogs.com/Dummer/p/11530323.html

前端复习之Ajax，忘完了相关推荐

前端复习HTML+CSS+JavaScript（必问面试题）
前端复习 HTML 常见的几种图片格式以及他们之间的区别是什么? JPG:支持有损压缩.不支持透明.不支持动画.色彩还原度较好 PNG:不支持压缩.支持透明.半透明.不透明.不支持动画 GIF:支持有 ...
前端复习8：JS高级
前端复习8:JS高级 1.对象 1.1 面向过程与面向对象 1.2 对象与类 2 构造函数和原型 2.1 构造函数 2.2 构造原型prototype 2.2 对象原型 2.3 constructor ...
前端复习——js（四）
前端复习--js 面向对象编程面向对象编程介绍面向过程POP(Process-oriented programming) 面向对象OOP(Object Oriented programming) ...
前端通信：ajax设计方案（三）--- 集成ajax上传技术
在此之前让我感慨一下现在的前端开发的氛围.我遇到好多人,给我的观念都是,这个东西这个框架有了,那个东西那个框架做了,前端嘛,学几个框架,这个拼凑一下那个拼凑一下就好了.其实我想问,东西都框架做了,那你 ...
前端 js jQuery ajax实现文件流下载, 下载doc,xsl等文件内容乱码问题
问题描述: 前端通过jQuery ajax接受后端的文件流,前端下载文件后内容乱码后端代码: Header("Content-type: application/octet-stream& ...
前端一定得学ajax吗,前端学习之ajax
一.什么是json JSON(JavaScriptObjectNotation,JS对象标记)是一种轻量级的数据交换格式. 它基于ECMAScript(w3c制定的js规范)的一个子集,采用完全独立于 ...
前端技术之Ajax（一）
前端技术之Ajax 同步交互异步交互 AJAX 异步验证用户名占用问题同步交互首先用户向HTTP服务器提交一个处理请求.接着服务器端接收到请求后,按照预先编写好的程序中的业务逻辑进行处理,比如和 ...
ajax 请求_前端后分离Ajax跨域请求保证Session一致
JAVA码牛牛,程序员学习指南前后端分离的项目,使用Ajax请求一般都出现跨域的问题. 跨域的时候所创建的session是不会被浏览器保存下来的.所以每次进行跨域请求时,服务器都认为不是同一个浏览器 ...
node.js ajax success,前端如何通过ajax和node.js交互？
首先我的文件结构: web -public --login.html(登陆页面属于静态页面) -veiws --index.jade -routes --index.js -app.js 前端代码 $ ...

前端复习之Ajax，忘完了

前端复习之Ajax，忘完了相关推荐

最新文章

热门文章