[原创]Ajax异步请求创建过程及实例_Android, Python及开发编程讨论区_Weblogic技术|Tuxedo技术|中间件技术|Oracle论坛|JAVA论坛|Linux/Unix技术|hadoop论坛

总帖数

每页帖数

1/1页

返回列表

发起投票

查看: 2798 | 回复: 2

主题： [原创]Ajax异步请求创建过程及实例

本主题由 qq_1414553774380 于 2014-11-24 18:07:35 移动

rui.yuan

注册用户

等级：中校
经验：1637
发帖：29
精华：0
注册：1970-1-1
状态：离线
发送短消息息给rui.yuan

加好友发送短消息息给rui.yuan

发消息

发表于：

2014-11-21 11:21:18 | [全部帖] [楼主帖]

楼主

一，创建请求

①首先要判断当前客户所使用的浏览器的内核类型，因为不同的浏览器内核创建请求的方式也不相同

判断IE内核：window.ActiveXObject

判断FireFox内核：window.XMLHttpRequest

②创建请求

创建IE内核请求：xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
创建FireFox内核请求：xmlHttp = new XMLHttpRequest();

二，发送请求

①准备数据

url：即请求的资源

method：请求的方式get/post

②打开请求装载数据

xmlHttp.open("GET", url, true);

③做好处理结果的准备

xmlHttp.onreadystatechange = goCallback;

④发送请求

xmlHttp.send(null);

三，处理结果

当请求状态发生改变的时候，会自动回调方法，在回调的方法中处理结果

xmlHttp.readyState=4
//xmlHttp.status=200的时候表示后台返回来正确的请求信息
//接收响应：①文本结构，②XML文档结构
//如果响应数据是普通文本（请求Servlet的响应）：
//var text = ajaxReq.responseText;
//如果响应的数据是XML结构（请求XML文件的响应）：
//var doc = ajaxReq.responseXML;

readyState的五种状态：

//ajax请求对象的状态(0~4)
//readyState=0：请求对象已经创建，但是没有调用open
//readyState=1：请求对象已经调用open进行参数设置，但是没有发送
//readyState=2：请求对象已经调用send发送出去，但是服务器还未响应
//readyState=3：请求对象正在和服务器进行数据交互
//readyState=4：请求对象已经完全获取到服务器的请求（访问结束）

以下是仿照上述做的一个小例子，校验用户名是否已经存在

var ajaxReq;
function checkName(){
      createRequest();
      var name=document.getElementById("userName").value;
      ajaxReq.open("GET","CheckServlet?name="+name,true);
      ajaxReq.onreadystatechange=dwork;
      ajaxReq.send(null);
}
function createRequest(){
if(window.ActiveXObject){
      ajaxReq=new ActiveXObject("Microsoft.XMLHTTP");
}else if(window.XMLHttpRequest){
ajaxReq=new XMLHttpRequest();
}else{
}
}
function dwork(){
if(ajaxReq.readyState==4 && ajaxReq.status==200){
      var result = ajaxReq.responseText;
      showTips(result);
}
function showTips(result){
var labTag = document.getElementById("nameTips");
if(result=="1"){

labTag.innerHTML = "用户名已注册！";

}else{

labTag.innerHTML = "用户名可用！";

}
}

该贴由qq_1414553774380转至本版2014-11-24 18:07:35