Ajax浅谈
Ajax的核心技术是JavaScript，XMLHttpRequest，DOM。
XMLHttpRequest，主要的通信代理，实现客户端与服务器端的异步数据交互；
DOM，对已载入页面进行动态更新，实现动态显示和交互；
JavaScript，编写Ajax引擎的脚本语言，同时负责绑定和处理所有数据，起到纽带的作用。
XML，数据交互格式，随着XML的流行，其将成为Ajax不可缺少的一部分。
一、Ajax的优势是：
1．无刷新更新页面，按需取数据，只更新需要更新的部分，不需要刷新整个页面，减少服务器的负担
2.进一步促进页面呈现和数据的分离，特别是使用XML数据表现形式。
二、使用Ajax
XMLHttpRequest对象是实现Ajax应用必不可少的核心技术，负责Ajax与服务器的异步交互，，因此Ajax的应用围绕XMLHttpRequest对象的创建、发送请求、处理响应来展开。
1， 创建XMLHttpRequest对象
Function createXMLHTTP(){
Var request;
Var browser=navigator.appName;//获取用户使用的浏览器名字
//使用IE，则使用MSXML创建XMLHTTP对象。
If(browser==”Microsoft Internet Explorer”){
Var arrVersions=[“MSXML2.XMLHttp.5.0”,”MSXML2.XMLHttp.4.0”,” MSXML2.XMLHttp.3.0”,” MSXML2.XMLHttp”,”Microsoft.XMLHttp”];
for (var i=0;i<arrVersions.length;i++){
try{
//从中找一个支持的版本并穿件XMLHTTP对象
request=new ActiveXobject(arrVersions[i]);
return request;
}
Catch(exception){
//忽略
}
}
}
//如果是Mozilla浏览器
else{
//就返回一个XMLHttpRequest对象
request=new XMLHttpRequest();
return request;
}
}
到此为止我们创建了一个跨IE和Mozilla浏览器的XMLHttpRequest对象。
下面用我们获得的这个XMLHttpRequest对象向服务器发送请求
2、向服务器发送请求
利用上面的创建函数常见XMLHTTP对象实例，向对应的服务器发送请求，可以是GET请求，也可以是POST请求。下面以GET请求为例，向服务器发送请求。代码如下：
Function Send_Request(url){
//创建XMLHTTP对象实例
var http_req=createXMLHTTP();
//Open函数建立连接，一定是异步方式
http_req.open(“GET”,url,true);
//声明回调函数
http_req.onreadystatechange=processRequest;
//发送请求
http_req.send(null);
}
3、处理服务器响应
在上一步声明的回调函数中，接收服务器返回的数据，并根据需求动态的更新页面（一般使用DOM协助完成）或者进行一些其他的操作（如弹出警告等），简单代码如下：
Function processRequest(){
//4表示请求完成
If（http_req.readyState==4）{
//200是请求正确
If(http_req.status==200){
//获取服务器的响应文本
Var ResponseStr=http_req.responseText;
//处理返回的数据，这里只是把数据以警告框的方式显示
alert(ResponseStr);
}
else{
alert(“请求页面异常”);
}
}
}
}
二、应用场景
1，数据验证
传统的WEB应用，是将整个表单填写完以后一并发给服务器进行验证，这样验证时间比较长而且给服务器造成不必要负担，同时用户在填入某项时也不能及时获得信息。使用Ajax可以在用户填入表单时候异步将该项表单数据发给服务器进行数据的验证，并立即返回处理结果，不需要刷新整个的页面，只动态的更新某一个页面的某一部分。
具体的代码实现如下：register.jsp如下
<script>
Function createXMLHTTP(){
Var request;
Var browser=navigator.appName;//获取用户使用的浏览器名字
//使用IE，则使用MSXML创建XMLHTTP对象。
If(browser==”Microsoft Internet Explorer”){
Var arrVersions=[“MSXML2.XMLHttp.5.0”,”MSXML2.XMLHttp.4.0”,” MSXML2.XMLHttp.3.0”,” MSXML2.XMLHttp”,”Microsoft.XMLHttp”];
for (var i=0;i<arrVersions.length;i++){
try{
//从中找一个支持的版本并穿件XMLHTTP对象
request=new ActiveXobject(arrVersions[i]);
return request;
}
Catch(exception){
//忽略
}
}
}
//如果是Mozilla浏览器
else{
//就返回一个XMLHttpRequest对象
request=new XMLHttpRequest();
return request;
}
}
//创建XMLHTTP对象实例变量
var http= createXMLHTTP();
//发送请求
function chkUser(){
//请求“CheckUserName” Servlet
Var url=”CheckUserName”;
Var name=document.getElementById(“userName”).value;
url+=(“?userName=”+escape(name)+”&oprate=chkUser”);
http.open(“GET“,url,true);
http. onreadystatechange=processResponse;
//发送请求
http.send(null);
return;
}
//处理服务器的响应
Function processResponse(){
//4表示请求完成
If（http.readyState==4）{
//200是请求正确
If(http.status==200){
//获取服务器的响应文本
Var ResponseStr=http.responseText;
if(ResponseStr==”该用户有效，可以使用”){
document.getElementById(“showStr”).innerText=http.responseText;
}
else{
alert(“不可用”);
}
}
}
}
</script>
<body>
<center>
<form action=”/Control?act=Register”>//form表单请求的是Control.java，同时附带了一个参数传给该类act
<input type=”text” name=”userName” onBlur=”chkUser()”>
<div id=”showStr”></div>
<input type=”submit”>
</form>
</body>
目标页面register.jsp请求“CheckUserName”,后者为服务器端Servlet程序（CheckUserName.java），我们简单处理，在其中声明一个字符串列表来保存已经使用过的用户名字，而GET请求响应函数获取请求的用户名参数，判断是否已经存在并把判断结果返回客户端。服务器的CheckUserName.java源代码如下：
Public class CheckUserName extends HttpServlet{
Private String msgStr=””;
Public String[] usernameList;
//响应GET请求函数
Protected void doGet(HttpServletRequest request, HttpServletResponse response){
String oprate=（string）request.getParameter(“oprate”);
String username=(string)request.getParameter(“userName”);
Try{
If(oprate.equals(“chkUser”)){
boolean flag=this.IsContain(username);//看数据库有木有该函数
If（！flag）response.getWriter（）.writer（“该用户名有效，可以使用！”）
}
}}}
Protected void doPost(HttpServletRequest request, HttpServletResponse response){
doGet(request,response);
}
//Servlet的初始化函数
Public void init（ServletConfig config）{
usernameList=new String[]{“Tom”,”jack”};
}
Private Boolean IsContain(String param){
For(int i=0;i<usernameList.length;i++){
If(usernameList[i].equals(param)){
Return true;
}
Else continue;
}
Return false;
}
}
2、级联目录实例
javascript向select添加opction方法三种：
- <html>
- <head>
- <script type="text/javascript">
- function add(){
- var testSelect = document.getElementById("testSelect");
- //alert(testSelect.options.length);
- //方式1
- var op=document.createElement("option");
- op.appendChild(document.createTextNode("方式一"));
- //方式2
- testSelect.appendChild(op);
- testSelect.options[testSelect.options.length] = new Option("方式二", "方式二");
- //方式3
- var op1 = new Option("方式三","方式三",true,true);
- testSelect.options.add(op1);
- }
- </script>
- </head>
- <body>
- <select name="testSelect" id="testSelect">
- <option label="test1" value="test1" >123</option>
- </select>
- <input type="button" value="add" onclick="add()"/>
- </body>
- </html>
