Ajax入门

Posted 2020-12-30 qfstudy

Ajax简介

Ajax即“Asynchronous javascript and XML”（异步的JavaScript与XML技术）

Ajax 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

XMLHttpRequest对象是浏览器提供的一个API，用来顺畅地向服务器发送请求并解析服务器响应，当然整个过程中，浏览器页面不会被刷新。

注意，Ajax 只能向同源网址（协议、域名、端口都相同）发出 HTTP 请求，如果发出跨域请求，就会报错。

创建Ajax步骤：

var xhr=new XMLHttpRequest()
xhr.onreadystatechange=function(){
    if(xhr.readyState===4){
        if(xhr.status===200){
            console.log(xhr.responseText)
        }else{
            console.log(new Error(xhr.statusText))
        }
    }   
}
xhr.open(‘GET‘,‘./ajax.html‘)
xhr.send()

1.创建XMLHttpRequest对象

var xhr = new XMLHttpRequest();

兼容各个浏览器的创建方法:

function createRequest (){
    try {
        xhr = new XMLHttpRequest();
    }catch (tryMS){
        try {
            xhr = new ActiveXObject("Msxm12.XMLHTTP");
        } catch (otherMS) {
            try {
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }catch (failed) {
                xhr = null;
            }
        }
    }
    return xhr;
}

2.准备请求

xhr.open(method,url,async);

• open() 的第一个参数是HTTP请求方法 - 有GET，POST，HEAD以及服务器支持的其他方法。 保证这些方法一定要是大写字母，否则其他一些浏览器（比如FireFox）可能无法处理这个请求。
• 第二个参数是要作为请求发送目标的URL。
• 第三个参数是true或false，表示请求是异步还是同步。true是异步，默认true。

3.发送请求

xhr.send();

send() 方法的参数可以是任何你想发送给服务器的内容

4.处理响应

xhr.onreadystatechange=function(){
    if(xhr.readyState===4){
        if(xhr.status===200){
            console.log(xhr.responseText)
        }else{
            console.log(new Error(xhr.statusText))
        }
    }   
}

XMLHttpRequest 的实例属性

1. onreadystatechange ：当处理过程发生变化的时候执行onreadystatechange对应的函数

2. readyState状态值

• 0：表示 XMLHttpRequest 实例已经生成，但是实例的open()方法还没有被调用。
• 1：表示open()方法已经调用，但是实例的send()方法还没有调用，仍然可以使用实例的setRequestHeader()方法，设定 HTTP 请求的头信息。
• 2：表示实例的send()方法已经调用，并且服务器返回的头信息和状态码已经收到。
• 3：表示正在接收服务器传来的数据体（body 部分）。这时，如果实例的responseType属性等于text或者空字符串，responseText属性就会包含已经收到的部分信息。
• 4：表示服务器返回的数据已经完全接收，或者本次接收已经失败。

1. responseText：服务器以文本字符的形式返回

2. responseXML：获得 XML形式的响应数据

XMLHttpRequest 的实例属性细节：阮一峰：XMLHttpRequest 对象

---

myButton=document.getElementById(‘myButton‘)
myButton.addEventListener(‘click‘,(e)=>{
    let xhr=new XMLHttpRequest()
    xhr.onreadystatechange=()=>{
       if( xhr.readyState===4){
           console.log("请求响应都完毕了")
           if( xhr.status>=200&& xhr.status<300){
               console.log("请求成功")
           }else if( xhr.status>=400){
               console.log("请求失败")
           }
       }
    }
    xhr.open(‘GET‘,‘/xxx‘)
    xhr.send()
})

当发送请求的时候，就会根据xml.open(‘GET‘,‘/xxx‘)找到对应的请求路径。在本文是找到/xxx路径，然后返回所请求的数据，在浏览器运行结果如下。