先了解一下 Ajax 是什么
是 Asynchronous JavaScript XML 的缩写,译为异步 JavaScrip t和 XML .
Ajax 本身不是一个技术,而是用来描述一种使用现有技术集合的“新”方法
JSON 和 XML 都被用于在Ajax模型中封装数据
Ajax 涉及的技术
Ajax 只是为实现异步交互的手段,不是一种技术,而是多种技术的整合
- HTML 页面
- Cascading Style Sheets ( CSS )
- JavaScript 脚本语言
- Document Object Model (DOM)
- XML
XMLHttpRequest
对象(是实现Ajax异步交互的核心)
Ajax 的工作原理
注意:Ajax异步交互的整体执行流程过程中,HTML页面是不被更新的。只是更新部分数据内容。
Ajax 的核心对象
是 XMLHttpReques
对象,该对象为客户端提供了在客户端在服务器之间传输数据的功能。
实现 Ajax 异步交互
实现 Ajax 的执行步骤
- 创建 Ajax 核心对象
XMLHttpRequest
对象 - 通过
XMLHttpRequest
对象的open()
方法与服务器端建立连接 - 构建请求所需的数据内容,井通过
XMLHttpReques
t对象的send()
方法发送给服务器端 - 通过
XMLHttpRequest
对象提供的onreadystatechange
事件监听服务器端的通信状态 - 接收并处理服务器端向客户端响应的数据结果
- 将处理结果 更新到HTML页面中
创建 Ajax 的核心对象
不同的浏览器,创建的方式略不同
不需要记住,保存好文件,用时调用就好。
-
匿名函数定义
// 定义函数 - 用于创建XMLHTTPRequest对象 (function () { //封装一个函数 function createXMLHttpRequest() { var httpReqest; if (window.XMLHttpRequest) { //适用于Chrome,FireFOX,Safari,... httpReqest = new XMLHttpRequest(); } else if (window.ActiveXObject) { //适用于IE浏览器 try { httpReqest = new ActiveXObject("Msxml2.XMLHTTP"); //IE 7+ } catch (e) { try { httpReqest = new ActiveXObject("Microsoft.XMLHTTP"); // IE 6- } catch (e) { } } } return httpReqest; } window.createXMLHttpRequest = createXMLHttpRequest; })();
-
函数式定义
function createXMLHttpRequest() { var httpRequest; if (window.XMLHttpRequest) { // 适用于非IE浏览器 httpRequest = new XMLHttpRequest(); } else if (window.ActiveXObject) { // 适用于IE浏览器 try { // IE 7+ httpRequest = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { // IE 6- httpRequest = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) {} } } return httpRequest; }
-
window 原型定义方法
Object.defineProperty(window, "createXMLHttpRequest", function () { var httpRequest; if (window.XMLHttpRequest) { // 适用于非IE浏览器 httpRequest = new XMLHttpRequest(); } else if (window.ActiveXObject) { // 适用于IE浏览器 try { // IE 7+ httpRequest = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { // IE 6- httpRequest = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) {} } } return httpRequest; });
建立 Ajax 异步请求连接
通过 Ajax 异步请求数据
通过 send()
方法实现
语法结构:
httpRequest.send(data);
//data - 表要向服务器端发送的请求数据内容
请求异步模式(默认),该方法会立刻返回。相反,如果是同步模式,啧只有等到请求响应完全接受后,该方法才会返回。
请求方式:
- 如果当前的请求方式为GET的话 - send()方法中只能传递null的值
- 将请求数据添加到请求地址链接中
监听服务器端通信状态
处理服务器端响应数据
GET 与 POST 请求方式
GET请求方式
-
将构间的请求数据添加到
open()
方法中的url
地址httpRequest.open('GET','',true); //” name=wq&password=12345 “ 表示请求数据
-
将发送请求数据的
send()
方法中参数设置为null
值httpRequest.send(null);
POST请求方式
-
调用
send()
方法之前,需要通过XMLHttpRequest
对象的setRequestHeader()
方法设置请求头信息。httpRequest.setRequestHeader(header,value); // header:将要被赋值的请求头名称 // value:给指定的请求头赋的值
httpRequest.setRequestHeafer('Content-Type','application/x-www-form-urlencoded');
-
通过
XMLHttpRequest
对象的send()
发送请求数据