AJAX (Asynchronous JavaScript and Xml)
直译中文 - javascript和XML的异步
同步与异步的区别:
同步交互
执行速度相对比较慢
响应的是完整的HTML页面
异步交互
执行速度相对比较快
响应的是部分数据
Ajax 的核心对象：
XMLHttpRequest 对象
创建 XMLHttpReuqest 对象
function getXhr(){
// 声明XMLHttpRequest对象
var xhr = null;
// 根据浏览器的不同情况进行创建
if(window.XMLHttpRequest){
// 表示除IE外的其他浏览器
xhr = new XMLHttpRequest();
}else{
// 表示IE浏览器
xhr = new ActiveXObject('Microsoft.XMLHttp');
}
return xhr;
}
// 创建核心对象
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属性,接收服务器端的响应数据
示例：
// 实现Ajax的异步交互的步骤
var btn = document.getElementById("btn");
btn.onclick = function(){
/*
* 1. 实现Ajax主要依靠XMLHttpRequest对象
* * 创建XMLHttpRequest对象
*/
var xhr = getXhr();
/*
* 2. 与服务器端建立连接
* * open(method,url,async)方法
* * method - 设置当前的请求类型(GET或POST)
* * url - 设置当前的请求地址
* * async - 设置是否异步(Boolean类型)
* * 默认值为true,表示异步
* * 官方认为使用XMLHttpRequest对象就是为了实现异步交互的
*/
xhr.open("get","01.php?user=zhangwuji");
/*
* 3. 客户端向服务器端发送请求
* * send(请求参数)方法
* * 请求参数的格式 - key=value
* * 如果请求类型为GET方式的话
* * send()方法是不能向服务器端发送请求数据的
* * 注意
* * send()方法是不能被省略的
* * GET请求类型 - send(NULL);
*/
xhr.send(null);
/*
* 4. 客户端接收服务器端的响应
* * 使用onreadystatechange事件
* * 监听服务器的通信状态
* * readyState属性
* * 得到服务器端当前通信状态
* * 备选项
* * 0 尚未初始化
* * 1 正在接收
* * 2 接收完成
* * 3 正在响应
* * 4 响应完成
* * status - 状态码
* * 200 OK
* * responseText属性
* * 接收服务器端的数据(HTML格式)
*/
xhr.onreadystatechange = function(){
// 保证服务器端响应的数据发送完毕
if(xhr.readyState == 4){
// 保证这次请求必须是成功的
if(xhr.status == 200){
// 接收服务器端的数据
var data = xhr.responseText;
// 测试
console.log(data);
}
}
}
}
// 定义创建XMLHttpRequest对象的函数
function getXhr(){
// 声明XMLHttpRequest对象
var xhr = null;
// 根据不同浏览器创建
if(window.XMLHttpRequest){
// 其他浏览器
xhr = new XMLHttpRequest();
}else{
// IE浏览器(8及之前)
xhr = new ActiveXObject("Microsoft.XMLHttp");
}
// 返回XMLHttpRequest对象
return xhr;
}
<?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 解析器：
function parseXML(xml){
// 声明解析XML后的DOM对象
var xmlDoc = null;
// 根据不同的浏览器
if(window.DOMParser){
// 其他浏览器
var parser = new DOMParser();
xmlDoc = parser.parseFromString(xml,"application/xml");
}else{
// IE浏览器
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = false;
xmlDoc.loadXML(xml);
}
return xmlDoc;
}
解析 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对象即可
示例：
/*
* 创建DOM解析XML的解析器 - 目前
* * IE浏览器
* new ActiveXObject("Microsoft.XMLDOM");
* * 其他浏览器
* 创建一个DOM的解析器
* var parser = new DOMParser();
* 使用DOM解析器解析XML文件
* var xmlDoc = parser.parseFromString(xmlFile,"application/xml");
*
* 当前报错:
* * 目前主流浏览器
* * 不允许读取本地文件
* * 不允许读取外部文件
*/
function parseXML(xmlFile){
// 创建解析XML后的DOM对象
var xmlDoc = null;
// 根据不同浏览器进行解析
if(window.DOMParser){
// 其他浏览器
var parser = new DOMParser();
xmlDoc = parser.parseFromString(xmlFile,"application/xml");
}else{
// IE浏览器
var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = false;
xmlDoc.loadXML(xmlFile);
}
return xmlDoc;
}
/*
* 测试
* 使用DOM的XML解析器 - 解析符合XML格式的字符串
* <user>
* <name>zhangwuji</name>
* </user>
*/
var xmlDoc = parseXML("<user id='u' name='u'><name>zhangwuji</name></user>");
//console.log(xmlDoc);
/*
* DOM解析XML与解析HTML没有任何区别
* * 注意
* * DOM解析XML使用ById或ByName两个方式
* * 实际开发中只用getElementsByTagName()方法
* * 原因 - 属性值在XML格式中都是有效数据
*/
var userEle = xmlDoc.getElementsByName("u")[0];
console.log(userEle);
示例：
var btn = document.getElementById("btn");
btn.onclick = function(){
// 实现Ajax的异步交互
var xhr = getXhr();
xhr.open("post","07.php");
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
/*
* 如何构建符合XML格式的请求数据
* * 注意
* * 请求数据的格式 - key=value 不能改变的
* * 将value值构建成符合XML格式的数据
* * 数据类型 - 字符串(string)
* * 格式符合XML的语法要求
* * 编写注意
* * 定义变量 - 专门构建XML格式的数据
* * 在send()方法进行拼串
*/
var user = "<user><name>zhangwuji</name><pwd>123456</pwd></user>";
xhr.send("user="+user);
xhr.onreadystatechange = function(){
if(xhr.readyState==4&&xhr.status==200){
// 接收服务器端的响应数据
var xmlDoc = xhr.responseXML;
var nameEle = xmlDoc.getElementsByTagName("name")[0];
var txtEle = nameEle.childNodes[0];
console.log(txtEle.nodeValue);
}
}
}
function getXhr(){
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLHttp");
}
return xhr;
}
<?php
// 接收客户端发送的请求数据
$user = $_POST['user'];//符合XML格式要求的string类型
//var_dump($user);
// 创建DOMDocument对象
$doc = new DOMDocument();
// 调用loadXML()方法
$result = $doc->loadXML($user);
//var_dump($doc); // 如何构建符合XML格式的数据
/* 修改响应头的Content-Type值为"text/xml"
header('Content-Type:text/xml');
echo $user;// 符合XML格式的string类型
*/ header('Content-Type:application/xml');
echo $doc->saveXML();
?>
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()函数进行转换
示例：
var btn = document.getElementById("btn");
btn.onclick = function(){
var xhr = getXhr();
xhr.open("post","10.php");
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
/*
* 在客户端如何构建JSON格式
* * 构建符合JSON格式的字符串
*/
var user = '{"name":"zhangwuji","pwd":"123456"}';
xhr.send("user="+user);
xhr.onreadystatechange = function(){
if(xhr.readyState==4&&xhr.status==200){
var data = xhr.responseText;
/*
* 使用eval()函数进行转换
* * 使用"()"将其包裹,eval()函数强制将其转换为JSON格式(javascript代码)
* * 不使用"()"将其包裹,eval()函数将其识别为一个空的代码块
*/
var json = eval("("+data+")");
console.log(json);
}
}
}
function getXhr(){
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLHttp");
}
return xhr;
}
<?php
// 接收客户端发送的请求数据
$user = $_POST['user'];
// 就是一个JSON格式的string字符串
//var_dump($user); $json_user = json_decode($user,true); //var_dump($json_user['name']); $json = '{"a":1,"b":2,"c":3,"d":4,"e":5}';
//var_dump(json_decode($json)); // 响应数据符合JSON格式的字符串
// 1. 手工方式构建
//echo '{"name":"zhouzhiruo","pwd":"123456"}'; // 2. 使用json_encode()函数
echo json_encode($json_user);
?>
HTML(文本格式)、XML格式及JSON格式的优缺点
* HTML格式
* 优点 - 简单
* 缺点 - 解析复杂
* XML格式
* 优点 - 易于构建复杂数据
* 缺点 - 构建、解析复杂
* JSON格式
* 优点 - 轻量级
* 缺点 - 可能转换失败