Ajax

来源：互联网发布：棋牌游戏数据代码编辑：程序博客网时间：2024/06/06 06:40

AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML）。

AJAX还有一个最大的特点就是，当服务器响应时，不用刷新整个浏览器页面，而是可以局部刷新。这一特点给用户的感受是在不知不觉中完成请求和响应过程。

AJAX第三例（用户名是否已被注册）

（当输入用户名后，把光标移动到其他表单项上时，浏览器会使用AJAX技术向服务器发出请求，服务器会查询名为zhangSan的用户是否存在，最终服务器返回true表示名为zhangSan的用户已经存在了，浏览器在得到结果后显示“用户名已被注册！”。

l 整个过程中页面没有刷新，只是局部刷新了；

l 在请求发出后，浏览器不用等待服务器响应结果就可以进行其他操作；）

 AJAX虽然提高了用户体验，但无形中向服务器发送的请求次数增多了，导致服务器压力增大；
 因为AJAX是在浏览器中使用Javascript技术完成的，所以还需要处理浏览器兼容性问题；

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript"> //为了处理浏览器兼容问题，给出下面方法来创建XMLHttpRequest对象：

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){

if(xmlHttp.responseText=="true"){

document.getElementById("error").innerHTML="用户已被注册";

}else{

document.getElementById("error").innerHTML="";

}

}; /项目名

xmlHttp.open("POST","/AjaxRegist/web/RegistServlet?method=regist",true);//这个参数可以不给，默认值为true，表示异步请求；

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

//POST请求必须设置ContentType请求头的值为application/x-www.form-encoded。表单的enctype默认值就是为application/x-www.form-encoded！因为默认值就是这个，所以大家可能会忽略这个值！当设置了<form>的enctype=” application/x-www.form-encoded”时，等同与设置了Cotnent-Type请求头。

但在使用AJAX发送请求时，就没有默认值了，这需要我们自己来设置请求头：

若是GET请求，需要在URL后连接参数。
注意：若没有参数，需要给出null为参数！若不给出null为参数，可能会导致FireFox浏览器不能正常发送请求！

var username=document.getElementById("username").value;

xmlHttp.send("username="+username);

}

</script>

</head>
<body>
<h1>注册</h1>
<form action="http://localhost:8080/AjaxRegist/RegistServlet?method=regist" method="post">
用户名：<input id="username" type="text" name="gzhanghao" onblur="send()"/>
<span id="error"></span><br/>
密码：<input type="password" name="gmima"/><br/>
<input type="submit" value="注册"/>
</form>
</body>
</html>

后台程序：

package web;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import cn.itcast.servlet.BaseServlet;
import service.RegistService;

/**
* Servlet implementation class RegistServlet
*/

public class RegistServlet extends BaseServlet {
private RegistService rservice;

public void regist(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
rservice=new RegistService();
String gzhanghao=request.getParameter("username");
response.getWriter().print(rservice.findZhanghao(gzhanghao));
}

}

当输入用户名后，把光标移动到其他表单项上时，浏览器会使用AJAX技术向服务器发出请求，服务器会查询名为zhangSan的用户是否存在，最终服务器返回true表示名为zhangSan的用户已经存在了，浏览器在得到结果后显示“用户名已被注册！”。

l 整个过程中页面没有刷新，只是局部刷新了；

l 在请求发出后，浏览器不用等待服务器响应结果就可以进行其他操作；

0 0