吾知网

标题: 纯js的ajax请求 [打印本页]

作者: 布谷 时间: 2015-10-29 11:56
标题: 纯js的ajax请求

为什么要写这篇文章呢？主要是我年前的一篇文章http://www.haorooms.com/post/qianduan_mianshi 总结前端面试过程中最容易出现的问题，中，有这个问题。我年前出去面试的时候，最起码有两个面试官提到这个问题，所以感觉这个东西还是蛮重要的，今天具体写一下！

纯js的ajax其实主要原理是利用XMLHttpRequest这个对象，关于这个对象，大家请看http://baike.baidu.com/view/1105115.htm

下面我就列举一个纯js的ajax函数吧！

/**
* 得到ajax对象
*/
function getajaxHttp() {
var xmlHttp;
try {
      // Firefox, Opera 8.0+, Safari
      xmlHttp = new XMLHttpRequest();
      } catch (e) {
         // Internet Explorer
         try {
            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
         } catch (e) {
         try {
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
         } catch (e) {
            alert("您的浏览器不支持AJAX！");
            return false;
         }
      }
}
return xmlHttp;
}
/**
* 发送ajax请求
* url--url
* methodtype(post/get)
* con (true(异步)|false(同步))
* parameter(参数)
* functionName(回调方法名，不需要引号,这里只有成功的时候才调用)
* (注意：这方法有二个参数，一个就是xmlhttp,一个就是要处理的对象)
* obj需要到回调方法中处理的对象
*/
function ajaxrequest(url,methodtype,con,parameter,functionName,obj){
var xmlhttp=getajaxHttp();
xmlhttp.onreadystatechange=function(){
      if(xmlhttp.readyState==4){
         //HTTP响应已经完全接收才调用
         functionName(xmlhttp,obj);
      }
};
xmlhttp.open(methodtype,url,con);
xmlhttp.send(parameter);
}
//这就是参数
function createxml(){
var xml="<user><userid>haorooms 纯js ajax请求<\/userid><\/user>";//"\/"这不是大写V而是转义是左斜杠和右斜杠
return xml;
}
//这就是参数
function createjson(){
var json={id:0,username:"haorooms"};
return json;
}
function c(){
alert("");
}
//测试
ajaxrequest("http://www.haorooms.com","post",true,createxml(),c,document);

参考：http://en.wikipedia.org/wiki/Ajax_(programming)

欢迎光临吾知网 (http://175999.com/bbs/)