AJAX

Ajax：（Asynchronous JavaScript And XML）指异步JavaScript 及XML

不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的 Web应用程序的技术，是基于JavaScript、XML、HTML、CSS新用法

 Ajax：只刷新局部页面的技术

l JavaScript：更新局部的网页

l XML：一般用于请求数据和响应数据的封装

l XMLHttpRequest对象：发送请求到服务器并获得返回结果

l CSS：美化页面样式

l 异步：发送请求后不等返回结果，由回调函数处理结果

JavaScript中XMLHttpRequest对象是整个Ajax技术的核心，它提供了异步发送请求的能力

构造方法

不同浏览器，甚至相同浏览器的不同版本，获取该对象的方式是不同的。

 

 

方法：

open()  "get|post" ，"url?name=tom"，"true|false"

send()  发送请求 。可以带参数 或 null

setRequestHeader()

属性

readyState：类型short；只读

responseText：类型String；只读

responseXML：类型Document；只读

status：类型short；只读

事件处理器

onreadystatechange

二、常用方法

方法名

说    明

open(method,URL,async)

建立与服务器的连接

method参数指定请求的HTTP方法,典型的值是GET或POST

URL参数指请求的地址

async参数指定是否使用异步请求，其值为true或false

send(content)

发送请求

content参数指定请求的参数

setRequestHeader(header,value)

设置请求的头信息

 

三、常用属性

l onreadystatechange：指定回调函数

l readyState: XMLHttpRequest的状态信息  

 

就绪状态码

说    明

0

XMLHttpRequest对象没有完成初始化

即：刚刚创建。

1

XMLHttpRequest对象开始发送请求

调用了open方法，但还没有调用send方法。请求还没有发出

2

XMLHttpRequest对象的请求发送完成

send方法已经调用，数据已经提交到服务器，但没有任何响应

3

XMLHttpRequest对象开始读取响应，还没有结束

收到了所有的响应消息头，但正文还没有完全收到

4

XMLHttpRequest对象读取响应结束

一切都收到了

 

l status：HTTP的状态码 

状态码

说    明

200

服务器响应正常

400

无法找到请求的资源

403

没有访问权限

404

访问的资源不存在

500

服务器内部错误

l responseText：获得响应的文本内容 

l responseXML：获得响应的XML文档对象 documednt

 注：就绪状态是4而且状态码是200，才可以处理服务器数据

 使用Ajax验证用户名是否存在实现步骤：

1、 使用文本框的onBlur事件

2、 使用Ajax技术实现异步交互

a) 创建XMLHttpRequest对象

b) 通过 XMLHttpRequest对象设置请求信息

c) 向服务器发送请求

d) 创建回调函数，根据响应状态动态更新页面

window.onload=function(){
var nameElement = document.getElementsByName("userName")[0];
nameElement.onblur = function(){
var name = this.value;//this等价于nameElement
//创建XMLHttpRequest对象
var xhr = getXMLHttpRequest();
//处理结果
xhr.onreadystatechange = function(){
if(xhr.readyState==4){//请求一切正常
if(xhr.status==200){//服务器响应一切正常
//alert(xhr.responseText);//得到响应结果
var msg = document.getElementById("msg");
if(xhr.responseText=="true"){
msg.innerHTML =  "<font color='red'>用户名已存在</font>";
//msg.innerText = "<font color='red'>用户名已存在</font>";
}else{
msg.innerHTML = "可以使用";
}
}
}
}

//创建连接
xhr.open("get","${pageContext.request.contextPath }/servlet/ckNameServlet?name="+name.value);
//发送请求
xhr.send(null);
}

}