布谷 发表于 2015-10-29 11:56:33

纯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)
页: [1]
查看完整版本: 纯js的ajax请求