1、AJAX简述

1.1 AJAX是甚么

AJAX（Asynchronous Javascript And XML）译成英文是“触发器Javascript和XML”。即采用Javascript词汇与服务器展开触发器可视化，统计数据传输的统计数据为XML（总之，统计数据传输的统计数据不罢了XML）。

AJAX除了两个最小的特征是，当伺服器积极响应时，不必创下整座应用领域程序网页，而要能局部性创下。而此特征给使用者的体会是在不经意中顺利完成允诺和积极响应操作方式过程。

1.2.　并行可视化与触发器可视化

1.3.　AJAX常用应用领域情境

当他们在腾讯中输出两个“传”字后，会立刻再次出现两个下拉条目！条目中表明的是包涵“传”字的10个URL。

只不过这儿就采用了AJAX控制技术！尚普托框再次出现了输出变动时，应用领域程序会采用AJAX控制技术向伺服器发送两个允诺，查阅包涵“传”字的前10个URL，接着伺服器会把查阅到的结论积极响应给应用领域程序，最终应用领域程序把这10个URL表明在下拉条目中。

当输出使用者名后，把母吕氏终端到其它表大项上后，应用领域程序会采用AJAX控制技术向伺服器收到允诺，伺服器会查阅名为zhangSan的使用者是否存在，最终伺服器返回true表示名叫zhangSan的使用者已经存在了，应用领域程序在得到结论后表明“使用者名已被注册！”。

1.4　AJAX的优缺点

优点：

缺点：

2、AJAX控制技术

2.1 AJAX第一例（发送GET允诺）

2.1.1 准备工作

因为AJAX也须要允诺伺服器，触发器允诺也是允诺伺服器，所以他们须要先写好伺服器端代码，即编写两个Servlet！

这儿，Servlet很简单，只须要输出“Hello AJAX!”。

public class AServlet extends HttpServlet {

public void doGet(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

System.out.println(“Hello AJAX!”);

response.getWriter().print(“Hello AJAX!”);

}

}

2.1.2　AJAX核心（XMLHttpRequest）

只不过AJAX是在Javascript中多添加了两个对象：XMLHttpRequest对象。所有的触发器可视化都是采用XMLHttpRequest对象顺利完成的。也是说，他们只须要学习两个Javascript的新对象即可。

注意，各个应用领域程序对XMLHttpRequest的支持也是不同的！大多数应用领域程序都支持DOM2规范，都能采用：var xmlHttp = new XMLHttpRequest()来创建对象

为了处理应用领域程序兼容问题，给出下面方法来创建XMLHttpRequest对象：

function createXMLHttpRequest() {

var xmlHttp;

try{

xmlHttp = new XMLHttpRequest();

} catch (e) {

try {

xmlHttp = new ActiveXObject(“Msxml2.XMLHTTP”);

} catch (e) {

try{

xmlHttp = new ActiveXObject(“Microsoft.XMLHTTP”);

} catch (e){}

}

}

return xmlHttp;

}

2.1.3　打开与伺服器的连接（open方法）

当得到XMLHttpRequest对象后，就能调用该对象的open()方法打开与伺服器的连接了。open()方法的参数如下：

open(method, url, async)：

var xmlHttp = createXMLHttpRequest();

xmlHttp.open(“GET”, “/ajaxdemo1/AServlet”, true);

2.1.4　发送允诺

当采用open打开连接后，就能调用XMLHttpRequest对象的send()方法发送允诺了。send()方法的参数为POST允诺参数，即对应HTTP协议的允诺体内容，若是GET允诺，须要在URL后连接参数。

注意：若没参数，须要给出null为参数！若不给出null为参数，可能会导致FireFox应用领域程序不能正常发送允诺！

xmlHttp.send(null);

2.1.5　接收伺服器积极响应

当允诺发送出去后，伺服器端Servlet就开始执行了，但伺服器端的积极响应还没接收到。接下来他们来接收伺服器的积极响应。

XMLHttpRequest对象有两个onreadystatechange事件，它会在XMLHttpRequest对象的状态再次出现变动时被调用。下面介绍一下XMLHttpRequest对象的5种状态：

onreadystatechange事件会在状态为1、2、3、4时引发。

　　下面代码会被执行四次！对应XMLHttpRequest的四种状态！

xmlHttp.onreadystatechange = function() {

alert(hello);

};

但通常他们只关心最终一种状态，即读取伺服器积极响应完结时，应用领域程序才会做出改变。他们能通过XMLHttpRequest对象的readyState属性来得到XMLHttpRequest对象的状态。

xmlHttp.onreadystatechange = function() {

if(xmlHttp.readyState == 4) {

alert(hello);

}

};

只不过他们还要关心伺服器积极响应的状态码是否为200，其伺服器积极响应为404，或500，那么就表示允诺失败了。他们能通过XMLHttpRequest对象的status属性得到伺服器的状态码。

最终

responsXML是xml格式的文本，是document对象

xmlHttp.onreadystatechange = function() {

if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {

alert(xmlHttp.responseText);

}

};

2.1.6　AJAX第一例小结

XMLHttpRequest对象的5种状态：

通常他们只关心4状态。

XMLHttpRequest对象

var xmlHttp = new XMLHttpRequest();

xmlHttp.open(“GET”, “/AJAX/AServlet”);

xmlHttp.send(null);

xmlHttp.onreadystatechange = function(){

if(xmlHttp.readyState == 4 && xmlHttp.status == 200){

var h1 = document.getElementById(“h1”);

h1.innerHTML = xmlHttp.responseText;

}

}

public class AServlet extends HttpServlet {

public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

response.setContentType(“text/html;charset=utf-8”);

response.getWriter().print(“hehe”);

}

}

2.2　AJAX第二例（发送POST允诺）

2.2.1　发送POST允诺注意事项

POST允诺必须设置ContentType允诺头的值为application/x-www.form-encoded。表单的enctype默认值是为application/x-www.form-encoded！因为默认值是那个，所以大家可能会忽略那个值！当设置了

但在使用AJAX发送允诺时，就没默认值了，这须要他们自己来设置允诺头：

xmlHttp.setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”);

当没设置Content-Type允诺头为application/x-www-form-urlencoded时，Web容器会忽略允诺体的内容。所以，在采用AJAX发送POST允诺时，须要设置而此允诺头，接着采用send()方法来设置允诺体内容。

xmlHttp.send(“b=B”);

AServlet

public void doPost(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

System.out.println(request.getParameter(“b”));

System.out.println(“Hello AJAX!”);

response.getWriter().print(“Hello AJAX!”);

}

ajax2.jsp

function createXMLHttpRequest() {

try {

return new XMLHttpRequest();//大多数应用领域程序

} catch (e) {

try {

return new ActiveXObject(“Msxml2.XMLHTTP”);

} catch (e) {

return new ActiveXObject(“Microsoft.XMLHTTP”);

}

}

}

function send() {

var xmlHttp = createXMLHttpRequest();

xmlHttp.onreadystatechange = function() {

if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {

var div = document.getElementById(“div1”);

div.innerHTML = xmlHttp.responseText;

}

};

xmlHttp.open(“POST”, “/ajaxdemo1/AServlet?”, true);

xmlHttp.setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”);

xmlHttp.send(“b=B”);

}

AJAX2

测试

2.3　AJAX第三例（使用者名是否已被注册）

2.3.1　功能介绍

在注册表单中，当使用者填写了使用者名后，把母吕氏移开后，会自动向伺服器发送触发器允诺。伺服器返回true或false，返回true表示那个使用者名已经被注册过，返回false表示没注册过。

应用领域程序得到伺服器返回的结论后，确定是否在使用者名文本框后表明“使用者名已被注册”的错误信息！

2.3.2　案例分析

2.3.3　代码

regist.jsp

function ajax(){

var userText = document.getElementById(“username”);

var username = userText.value;

var xmlHttp = new XMLHttpRequest();

xmlHttp.open(“GET”, “?username=”+username );

xmlHttp.send(null);

xmlHttp.onreadystatechange = function(){

if(xmlHttp.readyState == 4 && xmlHttp.status == 200){

var span = document.getElementById(“span1”);

if(xmlHttp.responseText == “true”){

span.innerHTML = “使用者名可用”;

}else{

span.innerHTML = “使用者名已被注册”;

}

}

}

}

使用者名：

RegistServlet.java

public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

String username = request.getParameter(“username”);

System.out.println(username);

if(username.equals(“admin”)){

response.getWriter().print(false);

}else{

response.getWriter().print(true);

}

}