AJAX

* 基本内容

* 同步交互与异步交互

* 同步交互

* 客户端向服务器端发送请求,到服务器端进行响应,这个过程中,用户是不能做任何其他事情(等).

* 异步交互

* 客户端向服务器端发送请求，直到服务器端进行响应，这个过程中，用户可以做任何其他事情(不等)

* AJAX

* Asynchronous JavaScript and Xml

* 直译中文 - javascript和XML的异步

* (不严格的定义)客户端与服务器端进行交互,而无需刷新当前页面的技术,称之为Ajax

* Ajax实现的是B/S架构下的异步交互

* 实现异步交互的技术

* <iframe src="">元素

* 同步与异步的区别

* 同步交互

* 执行速度相对比较慢

* 响应的是完整的HTML页面

* 异步交互

* 执行速度相对比较快

* 响应的是部分数据

* Ajax具有核心对象

* XMLHttpRequest对象

* 创建XMLHttpRequest对象

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

* status

* 方法

* open() - 与服务器端建立连接

* send() - 向服务器端发送请求

* 事件

* onreadystatechange事件

* 作用 - 监听服务器端的通信状态改变

* 实现Ajax的异步交互步骤

* 创建XMLHttpRequest核心对象

* 固定写法 - 独立编写

* 与服务器端建立连接

* 使用XMLHttpRequest对象的open(method,url)方法

* method - 设置当前请求的类型

* url - 设置当前请求的地址

* 向服务器端发送请求

* 使用XMLHttpRequest对象的send(请求参数)方法

* 请求参数的格式 - key=value

* 接收服务器端的响应数据

* 使用XMLHttpRequest对象的onreadystatechange事件,监听服务器端的通信状态

* 使用XMLHttpRequest对象的readyState属性,判断服务器端的当前状态(0-4)

* 使用XMLHttpRequest对象的status属性,判断服务器端的状态码(200)

* 使用XMLHttpRequest对象的responseText属性,接收服务器端的响应数据

* GET与POST的区别

* GET请求类型

* send()方法不起作用,但是不能被省略

xhr.send(null);

* 请求参数 - 添加到URL?key=value

* POST请求类型

* send()方法起作用

* 在send()方法被调用前,使用setRequestHeader()方法设置请求头信息

xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

* 使用Ajax的原则

* 小则怡情,大则伤身

* 另外的实现Ajax的步骤

* 创建XMLHttpRequest对象

* 注册监听

* 建立连接

* 发送请求

* 实现Ajax的六步是什么?(不标准)

* 创建XMLHttpRequest对象

* 建立连接

* 发送请求

* 注册监听 - onreadystatechange事件

* 获取服务器端的通信状态 - readyState

* 获取服务器端的状态码

*