前端复习之Ajax，忘完了
1 * Day01： 2 * Ajax 3 * Asynchronous JavaScript and XML 4 * 直译中文 - JavaScript和XML的异步 5 * （不严格的定义）客户端与服务器端进行交互，而无需刷新当前页面的技术，称之为Ajax 6 * Ajax实现的是B/S架构下的异步交互 7 * 实现异步交互的技术 8 * <iframe src="">元素 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 * status 28 * 200 - 请求成功 29 * 404 - 网页找不到 30 * 500 - 服务器端的错误 31 * 方法 32 * open(method，URL) - 与服务器端建立连接 33 * send() - 向服务器端发送请求 34 * 事件 35 * onreadystatechange 36 * 作用 - 监听服务器端的通信状态改变 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=value 58 * GET - send(null) 59 * send()方法不起作用 60 * 请求数据 - 增加在URL？key=value 61 * 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=value 74 * 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 <?php 2 //用于处理客户端的Ajax交互 3 //1.接收客户端发送的请求数据 4 $user=$_GET['user']; 5 //2.向客户端进行响应 6 echo 'get request successful'; 7 ?>
1 <body> 2 <input type="button" value="异步请求" id="btn"> 3 <script> 4 //实现Ajax交互的步骤 5 var btn=document.getElementById("btn"); 6 btn.onclick=function(){ 7 /* 8 * 1.实现Ajax主要依靠XMLHttpRequest对象 9 * * 创建XMLHttpRequest对象 10 * 11 */ 12 var xhr=getXhr(); 13 /* 14 * 2.与服务器端建立连接 15 * * open(method,url,async)方法 16 * * method - 设置当前请求的类型（ＧＥＴ或ＰＯＳＴ） 17 * * url - 设置当钱的请求类型 18 * * async - 设置是否异步（Boolean） 19 * * 默认为true 20 * * 官方认为XMLHttpRequest就用来实现交互的，为false的话，报错 21 */ 22 xhr.open("get","01.php?user=zhangwuji",true) 23 /* 24 * 3.客户端向服务器端发送请求 25 * * send(请求参数)方法 26 * * 请求参数的格式 - key=value 27 * * 如果请求类型为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 OK 48 * * 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 var data=xhr.responseText; 58 console.log(data); 59 } 60 } 61 } 62 } 63 function getXhr(){ 64 var xhr=null; 65 if(window.XMLHttpRequest){ 66 xhr=new XMLHttpRequest(); 67 }else{ 68 xhr=new ActiveXObject("Microsoft.XMLHttp"); 69 } 70 return xhr; 71 } 72 </script> 73 </body>
1 // 2.post请求类型的异步交互
<?php 2 //1.接受客户端发送的请求 3 $user=$_POST['user']; 4 //2.进行响应 5 echo $user.'post request successful'; 6 ?>
1 <body> 2 <input type="button" value="异步" id="btn"> 3 <script> 4 var btn=document.getElementById("btn"); 5 btn.onclick=function(){ 6 //实现Ajax的异步交互 7 var xhr=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 var data=xhr.responseText 21 console.log(data); 22 } 23 } 24 } 25 } 26 function getXhr(){ 27 var xhr=null; 28 if(window.XMLHttpRequest){ 29 xhr=new XMLHttpRequest(); 30 }else{ 31 xhr=new ActiveXObject("Microsoft.XMLhttp"); 32 } 33 return xhr; 34 } 35 </script> 36 </body>
1 //3.表单的异步交互
<?php 2 $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 <form id="myform" name="myform" action="03.php" method="post"> 3 用户名：<input type="text" id="user" name="user"><br> 4 密码：<input type="text" id="pwd" name="pwd"><br> 5 <input type="button" id="btn" value="登录"> 6 </form> 7 <script> 8 /* 9 * <form>表单元素，存在submit按钮，提交表单 10 * 使用Ajax提交表单的话，不需要submit 11 * 12 * 13 */ 14 //1.位button按钮绑定onclick事件 15 var btn=document.getElementById("btn"); 16 btn.onclick=function(){ 17 //使用Ajax实现表单提交 18 var xhr=getXhr(); 19 xhr.open("post","03.php"); 20 xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 21 //send发送用户名和密码 22 var user=document.getElementById("user").value; 23 var pwd=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 var data=xhr.responseText; 29 console.log(data); 30 } 31 } 32 } 33 function getXhr(){ 34 xhr=null; 35 if(window.XMLHttpRequest){ 36 xhr=new XMLHttpRequest(); 37 }else{ 38 xhr=new ActiveXObject("Microsoft.XMLHttp"); 39 } 40 return xhr; 41 } 42 </script> 43 </body>
4.普通二级联动与异步交互的二级联动
1 <body> 2 <select id="province"> 3 <option>请选择</option> 4 <option>山东省</option> 5 <option>陕西省</option> 6 <option>吉林省</option> 7 </select> 8 9 <select id="city"> 10 <option>请选择</option> 11 </select> 12 <script > 13 //1.为SELECT元素绑定onchange事件 14 var provinceEle=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 var city=document.getElementById("city"); 24 var opts=city.getElementsByTagName("option"); 25 for (var z=opts.length-1;z>0 ; z--) 26 { //将id为city的元素内容清空 27 city.removeChild(opts[z]); 28 } 29 30 var province =provinceEle.value; 31 32 var cities=[]; 33 switch(province){ 34 case "山东省": 35 cities=["青岛市","济南市","威海市","日照市"]; 36 break; 37 case "陕西省": 38 cities=["榆林市","神木","绥德","子州"]; 39 break; 40 case "吉林省": 41 cities=["长春市","松原市","通化市","四平市"]; 42 break; 43 } 44 for (var i=0;i<cities.length ;i++ ) 45 { 46 var option=document.createElement("opotion"); 47 var textNode=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 <?php 2 //用于处理客户端的请求二级联动的数据 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 <select id="province"> 3 <option>请选择</option> 4 <option>山东省</option> 5 <option>陕西省</option> 6 <option>吉林省</option> 7 </select> 8 9 <select id="city"> 10 <option>请选择</option> 11 </select> 12 <script> 13 var provinceEle=document.getElementById("province"); 14 provinceEle.onchange=function(){ 15 //清空 16 var city=document.getElementById("city"); 17 var opts=city.getElementsByTagName("option"); 18 for(var z=opts.length-1;z>0;z--){ 19 city.removeChild(opts[z]); 20 } 21 22 if(provinceEle.value!="请选择"){ 23 //执行ajax异步请求 24 var xhr=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 var data=xhr.responseText; 32 //data是字符串，转化为 33 //console.log(data); 34 var cities=data.split(",");console.log(cities[i]); 35 console.log(cities); 36 for(var i=0;i<cities.length;i++){ 37 var option=document.createElement("option"); 38 var textNode=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 function getXhr(){ 52 var xhr=null; 53 if(window.XMLHttpRequest){ 54 xhr=new XMLHttpRequest(); 55 }else{ 56 xhr=new ActiveXObject("Microsoft.XMLHttp"); 57 } 58 return xhr; 59 } 60 </script> 61 </body>
1 <?php 2 //接收客户端发送的请求数据state 3 $state=$_REQUEST['state']; 4 //判断state 5 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 <select id="province"> 3 <option>请选择</option> 4 </select> 5 6 <select id="city"> 7 <option>请选择</option> 8 </select> 9 <script> 10 var xhr=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 var data=xhr.responseText; 19 var provinces=data.split(","); 20 for(var i=0;i<provinces.length;i++){ 21 var option=document.createElement("option"); 22 var text=document.createTextNode(provinces[i]); 23 option.appendChild(text); 24 var province=document.getElementById("province"); 25 province.appendChild(option); 26 } 27 } 28 } 29 } 30 //第二次执行Ajax异步请求 - 城市 31 var province=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 var data=xhr.responseText; 41 console.log(data); 42 var cities=data.split(","); 43 for(var i=0;i<cities.length;i++){ 44 var option=document.createElement("option"); 45 var text=document.createTextNode(cities[i]); 46 option.appendChild(text); 47 var city=document.getElementById("city"); 48 city.appendChild(option); 49 } 50 } 51 } 52 } 53 function getXhr(){ 54 var xhr=null; 55 if(window.XMLHttpRequest){ 56 xhr=new XMLHttpRequest(); 57 }else{ 58 xhr=new ActiveXObject("Microsoft.XMLHttp"); 59 } 60 return xhr; 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|DOM 14 * XML - 配置文件|数据格式 15 * XML文件的扩展名为".xml" 16 * XML的定义方式与HTML非常相似 17 * HTML的元素预定义好的 18 * XML允许自定义元素 19 * XML的版本 20 * 1.0版本 - 21 * 1.1版本 - 几乎没人用 22 * 版本不会再更xin 23 * 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解析XML 45 * 创建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 * 请求的数据格式 - XML 71 * 客户端如何构建符合XML格式的数据 72 * 构建的数据类型 - 字符串（string）类型 73 * 字符串的内容符合XML格式的语法要求 74 * 服务器端如何接收符合XML的数据 75 * 接收客户端的请求数据 - 字符串（string类型） 76 * PHP继承了DOM的相关内容 77 * DOMDocument 78 * DOMElement 79 * DOMNode 80 * 响应的数据格式 - xml 81 * 服务器端如何构建符合XML格式的数据 82 * 设置服务器端的响应头"Content-Type"值为"text/xml" 83 * 构建一个符合XML格式的字符串（string）类型 84 * 手动方式构建字符串string 85 * 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 * Array 96 * Object 97 * 支持的数据类型 98 * String字符串 99 * Number数值 100 * Boolean 101 * Object 102 * Array 103 * null 104 * Ajax中的JSON格式 105 * 请求格式为JSON 106 * 客户端向服务器断发送请求 - JSON格式的数据 107 * 构建符合JSON格式的字符串 108 * 保证定义字符串时，使用单引号（里面使用双引号） 109 * 服务器端接收 110 * 接收客户端的数据 111 * 使用json_decode()函数进行解析 112 json_decode($json,true) 113 * 响应格式为JSON 114 * 服务器端向客户端发送响应为JSON格式的数据 115 * 使用json_encode()函数将PHP变量（array）转换为符合JSON格式的字符串 116 * 客户端接收JSON格式的数据 117 * 使用XMLHttpRequest对象的responseText属性接收 118 * 没有responseJSON属性 119 * 使用eval()函数进行转换 120 121 * HTML（文本格式）、XML格式、JSON格式的优缺点 122 * HTML 123 * 优点 - 简单 124 * 缺点 - 解析复杂 125 * XML 126 * 优点 - 易于构建复杂数据 127 * 缺点 - 构建、解析复杂 128 * JSON 129 * 优点 - 轻量级 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 <user id="01"> 6 <name>zhangsanfeng</name> 7 <age>18</age> 8 <job>jiaozhudie</job> 9 <addr>guangingding</addr> 10 <love /> 11 </user> 12 <user id="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 function parseXML(xml){ 3 var xmlDoc=null; 4 if(window.DOMParser){ 5 //其他浏览器 6 var parser=new DOMParser(); 7 xmlDoc=parser.parseFromString("02.xml","application/xml"); 8 }else{ 9 //IE浏览器 10 var parser=new ActiveXObject("Microsoft.XMLDOM"); 11 //异步 12 //parser.async=false; 13 xmDoc.async=false; 14 xmlDoc= parser.loadXML("02.xml"); 15 } 16 return xmlDoc; 17 18 } 19 var xmlDoc=parseXML("<user id='01'><name>zhangsanfeng</name></user>"); 20 21 var userEle=xmlDoc.getElementsByTagName("user")[0]; 22 var nameEle=userEle.getAttribute("name");/*????????????????????*/ 23 var nameTxt=nameEle.childNodes[0].nodeValue; 24 console.log(nameTxt); 25 </script>
1 /03.xml
<?xml version="1.0" encoding="utf-8" ?> 2 <china> 3 <province id="01" name="山东省"> 4 <cities> 5 <city>青岛市</city> 6 <city>济南市</city> 7 <city>威海市</city> 8 <city>日照市</city> 9 <city>德州市</city> 10 </cities> 11 </province> 12 <province name="辽宁省"> 13 <cities> 14 <city>大连市</city> 15 <city>沈阳市</city> 16 <city>铁岭市</city> 17 <city>锦州市</city> 18 <city>丹东市</city> 19 </cities> 20 </province> 21 <province name="陕西省"> 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 function parseXML(xml){ 4 var xmlDoc=null; 5 if(window.DOMParser){ 6 var parser=new DOMParser(); 7 xmlDoc=parser.parseFromString("03.xml","application/xml"); 8 }else{ 9 xmlDoc=new ActiveXObject("Microsoft.XMLDOM"); 10 xmlDoc.async=false; 11 xmlDoc.loadXML("03.xml"); 12 } 13 return xmlDoc; 14 } 15 //2. 16 var xmlDoc=parseXML('<province id="01" name="山东省"><city name="青岛市"/><city name="济南市"/><city name="威海市"/><city name="日照市"/><city name="德州市"/></province>'); 17 //a. 18 var proEle=xmlDoc.getElementsByTagName("province")[0]; 19 var proTxt=proEle.getAttribute("name"); 20 console.log(proTxt); 21 //b. 22 var citiesEle=xmlDoc.getElementsByTagName("city");//数组 23 for(var i=0;i<citiesEle.length;i++){ 24 var cityEle=citiesEle[i]; 25 var cityTxt=cityEle.getAttribute("name"); 26 console.log(cityTxt); 27 } 28 </script>
1 <?php 2 //接受客户端发送的请求 3 $user=$_POST['user'];//符合XML格式要求的string 4 //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 <input type="button" value="Ajax" id="btn"> 3 <script> 4 var btn=document.getElementById("btn"); 5 btn.onclick=function(){ 6 //实现Ajax的异步交互 7 var xhr=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 var user="<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 var xmlDoc=xhr.responseXML; 29 var nameEle=xmlDoc.getElementsByTagName("name")[0]; 30 var txtEle=nameEle.childNodes[0]; 31 32 } 33 } 34 } 35 function getXhr(){ 36 var xhr=null; 37 if(window.XMLHttpRequest){ 38 xhr=new XMLHttpRequest(); 39 }else{ 40 xhr=new ActiveXObject("Microsoft.XMLHttp"); 41 } 42 return xhr; 43 } 44 </script> 45 </body>
Day03:
1 Day 03： 2 * jQuery中的Ajax 3 * 封装第一层 - 类似于原生Ajax的用法 4 * $.ajax() - 最复杂 5 * 选项 - 格式是{key:value} 6 * * url - 请求地址 7 * * type - 请求类型，默认get 8 * * async - 是否异步，默认true 9 * * Content-Type - POST方式发送数据的前提 10 * 默认值为application/x-www-form-urlencoded 11 * * data - 请求数据，格式必须为key:value 12 * * success - 请求成功后的回调函数 13 * function(data,textStatus){} 14 * data - 服务器端响应的数据内容 15 * textStatus - 表示ajax请求的状态 16 * success 17 * * 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 * 没有请求数据时，请求类型是GET 35 * 发送请求数据时，请求类似是POST 36 * 默认接收服务器端的数据内容 37 * 是以字符串类型(HTML格式)进行接收 38 * 无法使用XML或JSON格式 39 * 40 * 41 * $.get() - 请求类型GET 42 * $.get(url,data,callback,type) 43 * * url - 设置当前Ajax请求的地址 44 * * data - 设置当前Ajax请求的数据 45 * 格式要求为key:value，构建object 46 * callback - 当前Ajax请求成功后的回调函数 47 * type - 设置服务器端响应的数据格式 48 * 默认值 - HTML格式 49 * xml - XML格式 50 * json - JSON格式 51 * 注意 52 * 无论是否发送请求数据，请求类型都是GET 53 * $.get()方法可以使用HTML格式、XML格式及json格式 54 * 55 * $.post() - 请求类型是POST 56 * 使用方式与$.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.com 97 * http://www.tedu.coom 98 * 跨子域 - IP相同但端口号不同 99 * http://127.0.0.1:8000 100 * http://127.0.0.1:8888 101 * 域名 102 * 顶级域名 103 * http://baidu.com 104 * 二级域名 105 * http://wenku.baidu.com 106 * http://www.baidu.com/kongjian 107 * 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 * Cookie 119 * 基本内容 120 * 浏览器的缓存 121 * 存储在浏览器内存中 122 * 关闭浏览器（窗口）后，数据会被自动销毁 123 * 存储在用户电脑硬盘中 124 * 关闭浏览器（窗口）后，数据不会销毁 125 * Cookie（小甜饼） 126 * 缓存文件 - 一些用户数据存储在此 127 * 问题 128 * 用户数据是以明码来存储的 129 * Cookie谁都可以读取 130 * A网站生成的Cookie文件，归属到百度 131 * 如何操作 132 * 读取Cookie 133 * 写入Cookie - 将 134 135 Ajax PROJECT: 136 * Web开发工具 137 * webStorm软件 138 * webStorm如何创建PHP页面 139 注意：webStorm并不支持php 140 * 下载PHPstorm软件 141 * 配置php 142 * 点击工具栏"File"->"SetTing",弹出配置窗口 143 * 选择“Editor
1// jQuery中的load方法
<?php 2 //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 <input type="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 * 没有请求数据时，请求类型是GET 19 * 发送请求数据时，请求类似是POST 20 * load()方法的请求类型由是否发送请求数据来决定 21 * load()方法接收服务器短的响应数据 22 * 是以字符串类型来接受的 23 * 24 */ 25 26 //请求数据格式为key/value，就是object对象 27 28 var user={"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方法
<?php 2 //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 <input type="button" id="btn1" value="get"/> 3 <input type="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，构建object 11 * callback - 当前Ajax请求成功后的回调函数 12 * type - 设置服务器端响应的数据格式 13 * 默认值 - HTML格式 14 * xml - XML格式 15 * json - JSON格式 16 * 注意 17 * 无论是否发送请求数据，请求类型都是GET 18 * $.get()方法可以使用HTML格式、XML格式及json格式 19 */ 20 var user={"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方法
<?php 2 echo 'post success'; 3 ?>
1 <body> 2 <input type="button" value="ajax" id="btn"/> 3 <script> 4 $("#btn").click(function(){ 5 /* 6 * $.ajax(options)方法 7 * * 选项 - 格式是{key:value} 8 * * url - 请求地址 9 * * type - 请求类型，默认get 10 * * async - 是否异步，默认true 11 * * Content-Type - POST方式发送数据的前提 12 * 默认值为application/x-www-form-urlencoded 13 * * data - 请求数据，格式必须为key:value 14 * * success - 请求成功后的回调函数 15 * function(data,textStatus){} 16 * data - 服务器端响应的数据内容 17 * textStatus - 表示ajax请求的状态 18 * success 19 * * error - 请求失败后的回调函数 20 * function(XMLHttpRequest,textStatus,errorThrown){} 21 * XMLHttpRequest - ajax的核心对象 22 * textStatus - 表示ajax请求的状态 23 * error、timeout、notmodified等 24 * errorThrown - 错误异常 25 * dataType - 设置响应数据格式 26 */ 27 var user={"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 <input type="text" id="chatdata"/> 3 <input type="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 var chatlist="";//不能赋值null 20 21 22 $("#btn").click(function(){ 23 var data={"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 <input type="button"value="读取" id="btn"/> 3 <div id="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>
<?php
echo '$("#comments").html("<p>zhuzhuxia</p><p>hahaha哈</p>")';
?>
表单的AJax请求:
1 <body> 2 <form id="myform" name="myform" action="07.php" method="post"> 3 用户名：<input type="text" id="username" name="username" ><br> 4 密码：<input type="text" id="password" name="password"><br> 5 <input type="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 var data=$("#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 <?php 2 //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 <form id="regist"> 3 用户名：<input type="text" name="username"/><br> 4 密码：<input type="text" name="password"/><br> 5 确认密码：<input type="text" name="repassword"/><br> 6 email:<input type="text" name="email"/><br> 7 地址：<input type="text" name="addr"/><br> 8 <input type="button" value="注册" id="btn"/> 9 </form> 10 <script> 11 //需求 - 表单ajax异步提交，表单序列化 12 $("#btn").click(function(){ 13 //1.表单序列化 14 var data=$("#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 <input type="button" value="跨域请求" id="btn"/> 8 <script> 9 $("#btn").click(function(){ 10 /* 11 * $.getJSON(url,data,callback)方法 12 * * URL - 请求地址 13 * data - 请求数据 14 * callback - 请求成功后的回调函数 15 16 * 该方法返回的是JSON 17 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 <?php 2 // 3 //echo '{"msg":"post success."}'; 4 $callback=$_GET['callback']; 5 //2.输出$callback 6 //var_dump($callback); 7 /* 8 * 3.向客户端进行响应 - json 9 * * 如何callback是一个函数的话，假设$callback 就是函数的名称 10 * * 函数的调用体 - $callback(实参) 11 * 向该函数传递的参数为实参 12 */ 13 echo $callback.'({"msg":"get success."})'; 14 ?>
