Ajax 即“Asynchronous Javascript And XML”,意思是异步的javaScript与XML,它是JavaScript、XML、CSS、DOM等多种已有技术的组合,可以实现客户端异步请求操作,从而可以在不需刷新页面的情况下与服务器进行通信,使得应用程序有更好的用户体验。
首先回顾下HTTP请求过程7个步骤:
1、建立TCP连接——>2、浏览器向服务器发送请求命令——>3、浏览器向服务器发送请求头信息——>4、服务器应答、
——>5、服务器发送应答头信息、——>6、服务器发送数据——>7、服务器关闭TCP连接
HTTP请求的四个组成部分:
请求的方法或动作(get/post)、请求的URL、请求头,请求体
Get请求:幂等的,安全的,一般用于查询等请求Post请求:一般用于表单数据提交
HTTP响应的三个组成部分:文字和数字组成的状态码、响应头、响应体
用XMLHttpRequest对象和web 服务器进行数据的异步交换;
1、XMLHttpRequest发送请求:
open(method,url,async)方法,方式get或post, 请求地址,同步false还是异步true(默认)
send();方法
2、XMLHttpRequest取得响应:
responseText :获得字符串形式的响应数据
responseXML:获得xml形式的响应数据(现在被淘汰,一般用json)
status和statusText:以数字和文本形式返回HTTP状态码
getAllResponseHeader();获取所有响应报头
getResponseHeader():查询响应中的某个字段
readyState属性:监听该属性查看请求是否成功响应
简单的例子
var xmlhttp;
functionverify() {//这个方法使用XMLHttpRequest对象来进行Ajax异步交互数据
//1.使用dom的方式获取文本框的内容
varuserName = document.getElementById("username").value;
//2.创建XMLHTTPRequest对象
if(window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} elseif(window.ActiveXObject) {
//针对ie6以下版本
var activexName = [ "MSXML2.XMLHTTP", "Microsoft.XMLHTTP"];
//两个可以用来创建XMLHTTPRequest对象的控件,进行尝试创建
for (var i = 0; i < activexName.length; i++) {
try {
xmlhttp = newActiveXObject(activexName[i]);
break;
} catch (e) {
}
}
}
//最后确认xmlhttprequest对象创建成功
if(!xmlhttp) {
alert("请更换更新版本的浏览器");
return;
} else{
//2.注册回调函数,只需要函数名不需要加括号
xmlhttp.onreadystatechange =callback;
//3.设置连接信息
xmlhttp.open("GET", "check.jsp?name=" + userName, true);
//4.发送数据,开始和服务器端进行交互
xmlhttp.send(null);
}
}
//回调函数
functioncallback() {
//判断对象交互完成
if(xmlhttp.readyState == 4) {
//判断http交互是否成功
if (xmlhttp.status == 200) {
//获取服务器的数据
//获取纯文本的数据
var responseText = xmlhttp.responseText;
document.getElementById("username_tip").innerHTML= responseText;
}
}
}