同步访问 当客户端向服务器发送请求时，服务器在处理过程中，浏览器只能等等，效率偏低 异步访问: 当客户端向服务器发送请求时，服务器在处理过程中，客户端可以做其他的操作，不需要一直等待，效率偏高 AJAX优点 1 异步 访问 2 局部 刷新 使用场合： 1 搜索建议 2 表单验证 3 表单提交 2 AJAX的核心对象 - 异步对象（XMLHttpRequest） 1 什么是XMLHttpRequest 简称为xhr 称为异步对象，代替浏览器向服务器发送请求并接收响应 xhr 是由JS来提供 2 创建异步对象（xhr） 主流的异步对象是 XMLHttpRequest 类型的，并且主流浏览器都支持（IE7+，chrome,Firefox,Safari,Opera） 全部支持， 但在Ie低版本浏览器中（ie6以及以下），就不支持 XMLHttpRequest,需要使用 ActiveXObject()来创建异步对象 支持 XMLHttpRequest :new XMLHttpRequest() 不支持 XMLHttpRequest: new ActiveXObject('Microsoft.XMLHTTP') 3 xhr 的成员 4 AJAX的操作步骤 1 GET请求 1 创建xhr 对象 2 创建请求 - open() 3 设置回调函数 - onreadystatechange 判断状态并且接收数据 4 发送请求-send() 1 方法 - open() 作用：创建请求 语法：open(method,url,async) method : 请求方法，取值为 'get'或'post' url :请求地址，字符串 async:是否采用异步的方式发送请求 true: 使用异步方式发送请求 false:使用同步方式发送请求 ex: xhr.open('get','/server',true) 2 属性 - readyState 作用：请求状态，通过不同的请求状态值来表示xhr与服务器的交互情况 由 0-4 共5个值来表示5个不同的状态 0 ： 请求尚未初始化 1 ：xhr已经与服务器建立连接 2 ：服务器端已经开始接收请求 3 : 请求正在处理中 4 ： 响应已完成 3 属性 - status 作用：表示服务器端的响应状态码 200： 表示服务器正解处理所有的请求以及给出的响应 404： 请求资源不存在 500：服务器内部错误 4 属性 - responseText 作用：服务器端的响应数据 5 事件 - onreadystatechange 作用：每当xhr的readyState属性值发生改变的时候要触发的操作 - 回调函数 在该函数中，只有当readyState的值为4并且status的值为200的时候，就可以正常的接收responseText了 6 方法 - send() 作用：通知xhr 向服务器发送请求 语法：send(body) body:表示请求的主体 get请求：是没有请求主体的，所以body的值为null xhr.send(null) post请求：是没有请求主体的，所以body的位置处要表示请求数据 xhr.send('请求数据') xhr.send('参数=值&参数=值') 2 POST 请求 1 请求提交的数据要作为 send()的参数进行提交 xhr.send('参数 = 值&参数=值') 2 修改请求消息头 在AJAX中，提交POST请求时，AJAX默认将 Content-Type请求消息头的值修改为"text/plain"了， 所以导致数据无法正常提交 解决方案：将 Content-Type的请求消息头再修改回"application/x-www-form-urlencoded"即可 xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded") Content-Type: application/x-www-form-urlencoded