ajax 是什么
是一种用于创建更好更快以及交互性更强的web引用程序的技术，是基于javascript，xml html css新用法
ajax 有什么用
Ajax 只刷新局部页面的技术，异步验证数据或者异步请求服务器拿到需要的数据
- javascript: 更新局部的网页
- xml: 一般用于请求数据和响应数据的封装
- XMLHttpRequest 对象：发送请求到服务器并获得返回结果
- css 美化页面样式
- 异步：发送请求后不等返回结果，由回调函数处理结果
ajax 如何用
创建XMLHttpRequest 对象
var xmlhttp;
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}方法：
open() "get|post" ,"url"
send() 发送请求，可以带参数或null
setRequestHeader()属性：
readyState： 类型short 只读
responseText： 类型 String;只读
responseXML：类型short 只读
常用方法
| 方法名 | 说明 |
|---|---|
| open(method,url,aync) | 建立与服务器的连接 method参数指定请求的HTTP方法,典型的值是GET或POST URL参数指请求的地址 async参数指定是否使用异步请求，其值为true或false |
| send(content) | 发送请求content 参数指定请求的参数 |
| setRequestHeader(header,vallue) | 设置请求的头信息 |
常用属性
- onredystatechange: 指定回调函数
- readyState:XMLHttpRequest的状态信息
| 就绪状态码 | 说明 |
|---|---|
| 0 | XMLHttpRequest对象没有完成初始化 即：刚刚创建。 |
| 1 | XMLHttpRequest对象开始发送请求 调用了open方法，但还没有调用send方法。请求还没有发出 |
| 2 | XMLHttpRequest对象的请求发送完成 send方法已经调用，数据已经提交到服务器，但没有任何响应 |
| 3 | XMLHttpRequest对象开始读取响应，还没有结束 收到了所有的响应消息头，但正文还没有完全收到 |
| 4 | XMLHttpRequest对象读取响应结束 一切都收到了 |
- status：HTTP的状态码
| 状态码 | 说明 |
|---|---|
| 200 | 服务器响应正常 |
| 400 | 无法找到请求的资源 |
| 403 | 没有访问权限 |
| 404 | 访问的资源不存在 |
| 500 | 服务器内部错误 |
** 就绪状态是4而且状态码是200，才可以处理服务器数据 **
代码示例
//获取XMLHttpRequest对象
function getXMLHttpRequest() {
var xmlhttp;
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlhttp;
}
var usernameInput = document.getElementById("username");
var msgSpan = document.getElementById("msg");
usernameInput.onblur = function() {
xmlhttp = getXMLHttpRequest();
var username = usernameInput.value;
//监听状态
xmlhttp.onreadystatechange = function() {
//响应状态 4代表响应成功
if(xmlhttp.readyState == 4) {
//判断服务器响应是否正常 200一切正常
if(xmlhttp.status == 200){
if(xmlhttp.responseText == "true"){
msgSpan.innerHTML ="可以注册"
} else {
msgSpan.innerHTML ="不可以注册"
}
}
}
}
//创建链接
xmlhttp.open("get","${pageContext.request.contextPath}/servlet/checkNameServlet?name="+username);
//发送请求
xmlhttp.send(null);
json 所需要加载的jar
json-lib-2.4-jdk15及其全部依赖jar包 commons-beanutils-1.8.0.jar、commons-collections-3.2.1.jar、commons-lang-2.6.jar、commons-logging-1.1.1.jar、ezmorph-1.0.6.jar、json-lib-2.4-jdk15.jar
2016.10.2
