js_ajax

js下ajax的实现

要实现ajax的局部刷新,在浏览器中可以创建这XMLHttpRequest对象来异步请求服务器并拦截下服务响应的消息,但是这个对象在原生js中是存在浏览器的兼容问题创建方式如下

function ajaxFunction() {
	 var xmlHttp;
	   try {
			// 所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）
			//均内建 XMLHttpRequest 对象
	       xmlHttp = new XMLHttpRequest();
	   } catch(e) {
	           try {
	               	// IE6, IE5 浏览器执行代码
	               xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
	           } catch(e) {}
	   }
	   return xmlHttp;
}

当然也有更严谨的方法创建,由于对于这些版本也不是很清楚,所以就一起贴出来给大家看看吧

function ajaxFunction() {
	var MSXML=['Msxml2.XMLHTTP.7.0','Msxml2.XMLHTTP.6.0',
               'Msxml2.XMLHTTP.5.0', 'Msxml2.XMLHTTP.4.0', 
		       'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP', 'Microsoft.XMLHTTP'];
	 var xmlHttp;
	   try {
	       xmlHttp = new XMLHttpRequest();
	   } catch(e) {
	          //在ie的各个版本之间进行对比
	          for(var i=0;i<MSXML.length;i++){
					try{
						xmlrequest=new ActiveXObject(MSXML[i]);
						break;
					}catch (ex) {  }
				}
	   }
	   return xmlHttp;
}

 

接下来就是使用该对象实现异步请求

#### 首先是responseText接收服务器返回的数据(文本数据,json数据)

function ci(){
  var xhr = ajaxFunction();
    //ajax的状态监听函数,每次状态改变都会调用这个函数
    xhr.onreadystatechange = function() {
        /*
            验证ajax的状态 readyState
            0 表示未初始化，还没有调用open方法
            1 表示已经初始化，但是没有发送请求，即没有调用send方法，即正在加载
            2 表示加载完毕，send已经被调用，请求开始
            3 代表交互中，服务器正在发送响应
            4 代表交互完成

            验证返回的状态
            404 没有找到页面
            403 禁止访问
            500 访问出错
            200 一切正常
            304 源文件没有被修改

         */
         //两个状态分别为4 和 200时就代表异步请求成功
        if(xhr.readyState == 4) {
            if(xhr.status == 200) {
                //获取服务器响应的数据
                var data= xhr.responseText;
                //获取的数据可以是服务器响应的字符串或者单个数字，
                也可以是整个页面，都会在这里被拦截
            }
        }
    }
    //规定发送数据的形式（post/get），url，以及传输方式(同步/异步) post方式
    xhr.open("post","CheckEmail.do",true);
    //post方式如果需要像 HTML 表单那样 POST 数据加下边这句，get方式不需要
    xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    //将页面输入数据发送到后台
    xhr.send("Email="+EmailName);

	/*get方式的实现  为了避免得到的浏览器的缓存结果，可以加一个随机的id标记避免重复
	xhr.open("get","CheckEmail.do?参数列=参数",true);
	xhr.send();
	*/
}

服务器的话只需要用response.getWriter().print()就可以将数据响应到页面，然后被ajax拦截
当服务器传给页面的是json数据的话需要做另外的处理json对象数组和单个json对象是不一样的

//响应的是基本的数值,将响应头修改为text/html
respoonsp.setContentType("text/html;charset=utf-8");
//服务器响应一个基本数值
PrintWriter out = resp.getWriter();
 out.print("0");
 
//页面可以直接获取到string的 0
var data = xml.responseText;

//服务器响应一个json
//需要设置响应头为text/json
respoonsp.setContentType("text/json;charset=utf-8");
 PrintWriter out = resp.getWriter();
 out.print("{'name':123,'age':12}");

//页面解析json
var data = xml.responseText;
var array = eval(  '(' + data + ')');
 alert(array.name);

//要区分的是，如果没有修改服务器的响应头的话传回页面的是一个xml的格式
 PrintWriter out = resp.getWriter();
 out.print("<users><user>123</user></users>");

//页面接收到的返回数据就只会是接收到的整个的string
//也就是获取到的是一个string的<users><user>123</user></users>

由于一般json对象是以”{}”的方式来开始以及结束的，在JS中，它会被当成一个语句块来处理，所以在使用eval()的时候需要用"(" + data + ")"包起来，将json转换成一个表达式.

第二种是responseXML(获取服务器返回的XML文档)

//首先需要修改的是 response中的setContentType  改成text/xml格式 这样返回的数据将被标识为xml数据
respoonsp.setContentType("text/xml;charset=utf-8");
request.setCharacterEncoding("utf-8");
PrintWriter out = response.getWriter();
out.print("<?xml version=\"1.0\" encoding=\"utf-8\"?>");
out.println("<infos>");
out.println("<info>");
out.println("<name>"+"name1"+"</name>");
out.println("<age>"+12+"</age>");
out.println("<name>"+"name2"+"</name>");
out.println("<age>"+22+"</age>");
out.println("</info>");
out.println("<info>");
out.println("<name>"+"name11"+"</name>");
out.println("<age>"+112+"</age>");
out.println("<name>"+"name22"+"</name>");
out.println("<age>"+222+"</age>");
out.println("</info>");
out.println("</infos>");

ajax部分

 var data = xml.responseXML;
 //获取到的XML文档可以使用js中的DOM操作节点获取相对应的节点数据
 //因为得到的是一个object XMLElement 对象
  alert(data.getElementsByTagName("info")[0].getElementsByTagName("name")[0].innerHTML);

如果使用responseText来接收返回的XMl文档的话会直接得到所有的参数数据，节点会被自动当成标签处理

如果觉得哪里写错了或着还有需要添加的，我希望大家能及时在底部给点建议

由于这玩意资料越查越多，越写越多，所以ajax的jq实现和js实现我还是分两篇博文来写吧