原生Ajax(XMLHttpRequest)

Posted rayh

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了原生Ajax(XMLHttpRequest)相关的知识,希望对你有一定的参考价值。

一、什么是Ajax:

  • 全称Asynchronous javascript and XML;

  • 异步的 JavaScript 和 XML;

  • 可以在不重新加载整个页面的情况下(偷偷发数据),与服务器交换数据并更新部分网页内容;

 

二、Ajax之XMLHttpRequest:

1)五步使用法:

  1.创建XMLHTTPRequest对象

  2.使用open方法设置和服务器的交互信息

  3.设置发送的数据,开始和服务器端交互

  4.拿到数据后执行相关操作

这是GET请求:

html: <a class="btn" onclick="AjaxSubmit2()">XMLHttpRequest点我</a> <script> function AjaxSubmit2() { //第1步 var xhr = new XMLHttpRequest(); //第2步设置发送方法 xhr.open(‘GET‘,‘/ajax1.html?p=123‘); //第3步设置发送数据 xhr.send(null); //第4步,回调函数,拿到服务端数据后执行相关操作 xhr.onreadystatechange = function () { if(xhr.readyState == 4){ {# 有0,1,2,3,4 四个数字都代表4个状态 #} // 接收服务端的全部信息 console.log(xhr.responseText); } }; } </script>

 

POST请求:跟GET请求不一样的是需要加上请求头

HTML:
<a class="btn" onclick="AjaxSubmit4()">XMLHttpRequest点我</a>

<script>
function AjaxSubmit4() {
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {
            if(xhr.readyState == 4){
                console.log(xhr.responseText);
            }
    };
    xhr.open("POST","/ajax1.html");
    {#  POST请求需要携带请求头,Django才能解析出来  #}
    xhr.setRequestHeader(‘Content-Type‘,‘application/x-www-form-urlencoded; charset-UTF-8‘);
    xhr.send("q=456");
}
</script>

 



以上是关于原生Ajax(XMLHttpRequest)的主要内容,如果未能解决你的问题,请参考以下文章

原生Ajax书写

原生Ajax--XmlHttpRequest对象

原生Ajax(XMLHttpRequest)

jQuery 利用$.ajax 时获取原生XMLHttpRequest 对象的方法

原生Ajax

原生js 封装ajax请求超详细