AJAX 异步交互基本总结
AJAX (Asynchronous JavaScript and Xml)
直译中文 - javascript和XML的异步
同步与异步的区别:
同步交互
执行速度相对比较慢
响应的是完整的HTML页面
异步交互
执行速度相对比较快
响应的是部分数据
Ajax 的核心对象：
XMLHttpRequest 对象
创建 XMLHttpReuqest 对象
1 function getXhr(){ 2 // 声明XMLHttpRequest对象 3 var xhr = null; 4 // 根据浏览器的不同情况进行创建 5 if(window.XMLHttpRequest){ 6 // 表示除IE外的其他浏览器 7 xhr = new XMLHttpRequest(); 8 }else{ 9 // 表示IE浏览器 10 xhr = new ActiveXObject('Microsoft.XMLHttp'); 11 } 12 return xhr; 13 } 14 // 创建核心对象 15 var xhr = getXhr();
Ajax 核心对象
属性：
* readyState
* 0 - (服务器端)尚未初始化
* 1 - (服务器端)正在接收
* 2 - (服务器端)接收完毕
* 3 - (服务器端)正在响应
* 4 - (服务器端)响应完毕
* status
* 200 - 请求成功
* 404 - 网页找不到(请求路径不正确)
* 500 - 服务器端错误
方法：
* open(method,url)方法
* 作用 - 与服务器端建立连接
* 参数
* method - 设置请求类型(GET或POST)
* url - 设置请求地址
* send()方法
* 作用 - 向服务器端发送请求参数
事件：
* onreadystatechange事件
* 作用 - 监听服务器端的通信状态改变
实现Ajax的异步交互步骤
1. 创建XMLHttpRequest核心对象
固定写法 - 独立编写
2. 与服务器端建立连接
使用XMLHttpRequest对象的open(method,url)方法
* method - 设置当前请求的类型
* url - 设置当前请求的地址
3. 向服务器端发送请求
使用XMLHttpRequest对象的send(请求参数)方法
* 请求参数的格式 - key=value
4. 接收服务器端的响应数据
* 使用XMLHttpRequest对象的onreadystatechange事件,监听服务器端的通信状态
* 使用XMLHttpRequest对象的readyState属性,判断服务器端的当前状态(0-4)
* 使用XMLHttpRequest对象的status属性,判断服务器端的状态码(200)
* 使用XMLHttpRequest对象的responseText属性,接收服务器端的响应数据
示例：
1 // 实现Ajax的异步交互的步骤 2 3 var btn = document.getElementById("btn"); 4 btn.onclick = function(){ 5 /* 6 * 1. 实现Ajax主要依靠XMLHttpRequest对象 7 * * 创建XMLHttpRequest对象 8 */ 9 var xhr = getXhr(); 10 /* 11 * 2. 与服务器端建立连接 12 * * open(method,url,async)方法 13 * * method - 设置当前的请求类型(GET或POST) 14 * * url - 设置当前的请求地址 15 * * async - 设置是否异步(Boolean类型) 16 * * 默认值为true,表示异步 17 * * 官方认为使用XMLHttpRequest对象就是为了实现异步交互的 18 */ 19 xhr.open("get","01.php?user=zhangwuji"); 20 /* 21 * 3. 客户端向服务器端发送请求 22 * * send(请求参数)方法 23 * * 请求参数的格式 - key=value 24 * * 如果请求类型为GET方式的话 25 * * send()方法是不能向服务器端发送请求数据的 26 * * 注意 27 * * send()方法是不能被省略的 28 * * GET请求类型 - send(NULL); 29 */ 30 xhr.send(null); 31 /* 32 * 4. 客户端接收服务器端的响应 33 * * 使用onreadystatechange事件 34 * * 监听服务器的通信状态 35 * * readyState属性 36 * * 得到服务器端当前通信状态 37 * * 备选项 38 * * 0 尚未初始化 39 * * 1 正在接收 40 * * 2 接收完成 41 * * 3 正在响应 42 * * 4 响应完成 43 * * status - 状态码 44 * * 200 OK 45 * * responseText属性 46 * * 接收服务器端的数据(HTML格式) 47 */ 48 xhr.onreadystatechange = function(){ 49 // 保证服务器端响应的数据发送完毕 50 if(xhr.readyState == 4){ 51 // 保证这次请求必须是成功的 52 if(xhr.status == 200){ 53 // 接收服务器端的数据 54 var data = xhr.responseText; 55 // 测试 56 console.log(data); 57 } 58 } 59 } 60 } 61 62 63 // 定义创建XMLHttpRequest对象的函数 64 function getXhr(){ 65 // 声明XMLHttpRequest对象 66 var xhr = null; 67 // 根据不同浏览器创建 68 if(window.XMLHttpRequest){ 69 // 其他浏览器 70 xhr = new XMLHttpRequest(); 71 }else{ 72 // IE浏览器(8及之前) 73 xhr = new ActiveXObject("Microsoft.XMLHttp"); 74 } 75 // 返回XMLHttpRequest对象 76 return xhr; 77 }
<?php // 用于处理客户端的Ajax异步请求 // 1. 接收客户端发送的请求数据 $user = $_GET['user']; // 2. 向客户端进行响应 echo $user.' get request succesful.'; ?>
GET 与 POST 的区别：
GET请求类型
* send()方法不起作用,但是不能被省略
xhr.send(null);
* 请求参数 - 添加到URL?key=value
POST请求类型
* send()方法起作用
* 在send()方法被调用前,使用setRequestHeader()方法设置请求头信息
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
实现Ajax的六步是什么?(不标准)
1. 创建XMLHttpRequest对象
2. 建立连接
3. 发送请求
4. 注册监听 - onreadystatechange事件
5. 获取服务器端的通信状态 - readyState
6. 获取服务器端的状态码
XML 解析
XML 语法
声明：
<?xml version="1.0" encoding="UTF-8" ?>
定义元素：
* 根元素
* 必须是起始标签
* 只能定义一个
* 定义元素
* 元素名可以自定义
* 分类
* 起始标签或单标签
定义属性
DOM 解析 XML
创建 XML 解析器：
1 function parseXML(xml){ 2 // 声明解析XML后的DOM对象 3 var xmlDoc = null; 4 // 根据不同的浏览器 5 if(window.DOMParser){ 6 // 其他浏览器 7 var parser = new DOMParser(); 8 xmlDoc = parser.parseFromString(xml,"application/xml"); 9 }else{ 10 // IE浏览器 11 xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); 12 xmlDoc.async = false; 13 xmlDoc.loadXML(xml); 14 } 15 return xmlDoc; 16 }
解析 XML 与解析 HTML 一致
* 很少使用ById和ByName两个方法
* 注意
* 浏览器不允许读取外部的XML文件
* 浏览器解析符合XML格式的字符串
Ajax中的XML格式
* 请求的数据格式 - XML
* 客户端如何构建符合XML格式的数据
* 构建的数据类型 - 字符串(string)类型
* 字符串的内容符合XML格式的语法要求
* 服务器端如何接收符合XML格式的数据
* 接收客户端的请求数据 - 字符串(string)类型
* PHP集成了DOM的相关内容
* DOMDocument类
* DOMElement类
* DOMNode类
* 响应的数据格式 - XML
* 服务器端如何构建符合XML格式的数据
* 设置服务器端的响应头"Content-Type"值为"text/xml"
* 构建符合XML格式数据内容
* 手动方式构建字符串(string)内容
* DOMDocument对象的方法
* loadXML(符合XML格式的字符串);
* saveXML()方法进行响应
* 客户端如何接收符合XML格式的数据
* 使用XMLHttpRequest对象的responseXML属性接收
* 接收回来的就是XML DOM对象(不需要使用XML解析器进行解析)
* 直接使用DOM解析XML DOM对象即可
示例：
1 /* 2 * 创建DOM解析XML的解析器 - 目前 3 * * IE浏览器 4 * new ActiveXObject("Microsoft.XMLDOM"); 5 * * 其他浏览器 6 * 创建一个DOM的解析器 7 * var parser = new DOMParser(); 8 * 使用DOM解析器解析XML文件 9 * var xmlDoc = parser.parseFromString(xmlFile,"application/xml"); 10 * 11 * 当前报错: 12 * * 目前主流浏览器 13 * * 不允许读取本地文件 14 * * 不允许读取外部文件 15 */ 16 function parseXML(xmlFile){ 17 // 创建解析XML后的DOM对象 18 var xmlDoc = null; 19 // 根据不同浏览器进行解析 20 if(window.DOMParser){ 21 // 其他浏览器 22 var parser = new DOMParser(); 23 xmlDoc = parser.parseFromString(xmlFile,"application/xml"); 24 }else{ 25 // IE浏览器 26 var xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); 27 xmlDoc.async = false; 28 xmlDoc.loadXML(xmlFile); 29 } 30 return xmlDoc; 31 } 32 /* 33 * 测试 34 * 使用DOM的XML解析器 - 解析符合XML格式的字符串 35 * <user> 36 * <name>zhangwuji</name> 37 * </user> 38 */ 39 var xmlDoc = parseXML("<user id='u' name='u'><name>zhangwuji</name></user>"); 40 //console.log(xmlDoc); 41 /* 42 * DOM解析XML与解析HTML没有任何区别 43 * * 注意 44 * * DOM解析XML使用ById或ByName两个方式 45 * * 实际开发中只用getElementsByTagName()方法 46 * * 原因 - 属性值在XML格式中都是有效数据 47 */ 48 var userEle = xmlDoc.getElementsByName("u")[0]; 49 console.log(userEle);
示例：
1 var btn = document.getElementById("btn"); 2 btn.onclick = function(){ 3 // 实现Ajax的异步交互 4 var xhr = getXhr(); 5 xhr.open("post","07.php"); 6 xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 7 /* 8 * 如何构建符合XML格式的请求数据 9 * * 注意 10 * * 请求数据的格式 - key=value 不能改变的 11 * * 将value值构建成符合XML格式的数据 12 * * 数据类型 - 字符串(string) 13 * * 格式符合XML的语法要求 14 * * 编写注意 15 * * 定义变量 - 专门构建XML格式的数据 16 * * 在send()方法进行拼串 17 */ 18 var user = "<user><name>zhangwuji</name><pwd>123456</pwd></user>"; 19 xhr.send("user="+user); 20 xhr.onreadystatechange = function(){ 21 if(xhr.readyState==4&&xhr.status==200){ 22 // 接收服务器端的响应数据 23 var xmlDoc = xhr.responseXML; 24 var nameEle = xmlDoc.getElementsByTagName("name")[0]; 25 var txtEle = nameEle.childNodes[0]; 26 console.log(txtEle.nodeValue); 27 } 28 } 29 } 30 function getXhr(){ 31 var xhr = null; 32 if(window.XMLHttpRequest){ 33 xhr = new XMLHttpRequest(); 34 }else{ 35 xhr = new ActiveXObject("Microsoft.XMLHttp"); 36 } 37 return xhr; 38 }
1 <?php 2 // 接收客户端发送的请求数据 3 $user = $_POST['user'];//符合XML格式要求的string类型 4 //var_dump($user); 5 // 创建DOMDocument对象 6 $doc = new DOMDocument(); 7 // 调用loadXML()方法 8 $result = $doc->loadXML($user); 9 //var_dump($doc); 10 11 // 如何构建符合XML格式的数据 12 /* 修改响应头的Content-Type值为"text/xml" 13 header('Content-Type:text/xml'); 14 echo $user;// 符合XML格式的string类型 15 */ 16 17 header('Content-Type:application/xml'); 18 echo $doc->saveXML(); 19 ?>
JSON (JavaScript Object Notation) 格式
JSON 数据格式源于 Javascript (JS原生支持)
JSON 的结构
* Array - 数组
* Object - 对象
* 支持的数据类型
* String字符串
* Number数值
* Boolean - true|false
* Object
* Array
* null
Ajax中的JSON格式
* 请求格式为JSON
* 客户端向服务器端发送请求为JSON格式的数据
* 构建符合JSON格式的字符串
* 保证定义字符串时,使用单引号(里面使用双引号)
* 服务器端接收JSON格式的数据
* 接收客户端的数据
* 使用json_decode()函数进行解析
json_decode($json,true)
* 响应格式为JSON
* 服务器端向客户端发送响应为JSON格式的数据
* 使用json_encode()函数将PHP变量(array)转换成符合JSON格式的字符串
* 客户端接收JSON格式的数据
* 使用XMLHttpRequest对象的responseText属性接收
* 没有responseJSON属性
* 使用eval()函数进行转换
示例：
1 var btn = document.getElementById("btn"); 2 btn.onclick = function(){ 3 var xhr = getXhr(); 4 xhr.open("post","10.php"); 5 xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 6 /* 7 * 在客户端如何构建JSON格式 8 * * 构建符合JSON格式的字符串 9 */ 10 var user = '{"name":"zhangwuji","pwd":"123456"}'; 11 xhr.send("user="+user); 12 xhr.onreadystatechange = function(){ 13 if(xhr.readyState==4&&xhr.status==200){ 14 var data = xhr.responseText; 15 /* 16 * 使用eval()函数进行转换 17 * * 使用"()"将其包裹,eval()函数强制将其转换为JSON格式(javascript代码) 18 * * 不使用"()"将其包裹,eval()函数将其识别为一个空的代码块 19 */ 20 var json = eval("("+data+")"); 21 console.log(json); 22 } 23 } 24 } 25 function getXhr(){ 26 var xhr = null; 27 if(window.XMLHttpRequest){ 28 xhr = new XMLHttpRequest(); 29 }else{ 30 xhr = new ActiveXObject("Microsoft.XMLHttp"); 31 } 32 return xhr; 33 }
1 <?php 2 // 接收客户端发送的请求数据 3 $user = $_POST['user']; 4 // 就是一个JSON格式的string字符串 5 //var_dump($user); 6 7 $json_user = json_decode($user,true); 8 9 //var_dump($json_user['name']); 10 11 $json = '{"a":1,"b":2,"c":3,"d":4,"e":5}'; 12 //var_dump(json_decode($json)); 13 14 // 响应数据符合JSON格式的字符串 15 // 1. 手工方式构建 16 //echo '{"name":"zhouzhiruo","pwd":"123456"}'; 17 18 // 2. 使用json_encode()函数 19 echo json_encode($json_user); 20 ?>
HTML(文本格式)、XML格式及JSON格式的优缺点
* HTML格式
* 优点 - 简单
* 缺点 - 解析复杂
* XML格式
* 优点 - 易于构建复杂数据
* 缺点 - 构建、解析复杂
* JSON格式
* 优点 - 轻量级
* 缺点 - 可能转换失败
