Question

JS如何实现Ajax的请求函数

Answer 1

<script type="text/javascript">  
    //请求函数  
    function f1(){  
        console.log('start');  
        //1.创建AJAX对象  
        var ajax = new XMLHttpRequest();  
          
        //4.给AJAX设置事件(这里最多感知4[1-4]个状态)  
        ajax.onreadystatechange = function(){  
            //5.获取响应  
            //responseText      以字符串的形式接收服务器返回的信息  
            //console.log(ajax.readyState);  
            if(ajax.readyState == 4 && ajax.status == 200){  
                var msg = ajax.responseText;  
                console.log(msg);  
                //alert(msg);  
                var divtag = document.getElementById('result');  
                divtag.innerHTML = msg;  
            }  
        }  
          
        //2.创建http请求,并设置请求地址  
        var username = document.getElementsByTagName('input')[0].value;  
        var email = document.getElementsByTagName('input')[1].value;  
        username = encodeURIComponent(username);    //对输入的特殊符号(&,=等)进行编码  
        email = encodeURIComponent(email);  
        ajax.open('get','response.php?username='+username+'&email='+email);  
          
        //3.发送请求(get--null    post--数据)  
        ajax.send(null);  
    }  
      
</script>

Answer 2

var request =null;
if(window.XMLHttpRequest){
request=new XMLHttpRequest(); //ie7+
}else{
request=new ActiveXObject(Microsoft.XMLHTTP) //ie5 6
}
request.onreadystatechange=function(){// 状态发生变化时，函数被回调
if(request.readyState===4){// 成功完成
// 判断响应结果:
if(request.status===200){
// 成功，通过responseText拿到响应的文本:
return success(request.responseText);
}else{
// 失败，根据响应码判断失败原因:
return fail(request.status);
}
}else{
// HTTP请求还在继续...
}
}
// 发送请求:
//第一个参数请求方式
第二个参数url请求链接
第三个参数 是否异步
request.open("POST","url",true);
request.setRequestHeader("Content-type","application/x-www-form-urlencoded"); //必须写在open和send中间
request.send("name=悟空&age=29");

Answer 3

这次给大家带来JS如何实现Ajax的请求函数，JS实现Ajax请求函数的注意事项有哪些，下面就是实战案例，一起来看一下。
一般我们写网页的时候，如果用到 Ajax 请求服务器，都是使用 JQuery 等已经封装好的库来调用，比较简单。
但是一般这些库的功能很多，引入了太多我们用不到的东西，如果我们需要写一个功能单一，简单的页面，完全用不到引用如此庞大的库文件。