Ajax简介
Ajax 是 Asynchronous JavaScript and XML的缩写。
Ajax 基本上就是把 JavaScript 技术和 XMLHttpRequest 对象放在 Web 表单和服务器之间。当用户填写表单时，数据发送给一些 JavaScript 代码而不是 直接发送给服务器。相反，JavaScript 代码捕获表单数据并向服务器发送请求。同时用户屏幕上的表单也不会闪烁、消失或延迟。
-
Ajax的核心对象
XMLHttpRequerst对象-
获取XMLHttpRequest对象
function getXhr(){//设置一个空变量 var xhr = null; //判断是否支持XMLHttpReuqest if(window.XMLHttpRequest){//支持，非IE的方式 xhr = new XMLHttpRequest(); }else{//不支持,IE的方式 xhr = new ActiveXObject("Microsoft.XMLHttp") } return xhr; } -
属性
1) readyState 请求状态 0 尚未初始化 1正在发送请求 2请求完成 3请求成功，正在接受数据 4数据接收成功 2) status 请求响应值 200 表示请求成功 202 请求被接受但处理未完成 400 错误的请求 404 资源未找到 500 内部服务器错误，如asp代码错误等 3) responseText 服务器返回的文本 4) responseXML 服务器返回的xml，可以当做DOM处理 -
方法
open(method,url) - 与服务端建立连接send() - 向服务器端发送请求 abort() - 取消请求 getAllResponseHeaders() 得到响应的所有http头 getResponseHeader() 获取指定的http头 setRequestHeader() 指定请求的Http头 -
事件
onreadystatechange事件
作用 - 监听服务端的通信状态改变当Ajax对象的readyState的值发生了改变，比如，从0变成了1，就会产生readystatechange事件
-
-
实现Ajax的异步交互过程，下面给出一个示例：
//1. 创建ajax对象
var xhr = getXhr();function getXhr(){ //设置一个空变量 var xhr = null; //判断是否支持XMLHttpReuqest if(window.XMLHttpRequest){//支持，非IE的方式 xhr = new XMLHttpRequest(); }else{//不支持,IE的方式 xhr = new ActiveXObject("Microsoft.XMLHttp") } return xhr; } /*2. 跟服务器建立链接,open第三个boolean可以设置同步交互还是异步交互，默认为true，为异步交互，现在ajax已经慢慢的弃用同步交互 * * 使用get方式提交数据，要将参数拼到url的后面,并且发送时设置发送内容为null */ var input = document.getElementById("user"); xhr.open("get","myPhp01.php?user="+input.value); //3. 发送数据,格式为key=value,多个参数用&隔开 xhr.send(null); //4. 监听服务器的响应 xhr.onreadystatechange = function(){ //当数据接受完毕，以及请求成功时，做处理 if(xhr.readyState == 4 && xhr.status == 200){ //将响应的内容放到div里 document.getElementById("content").innerHTML = xhr.responseText; } }
