使用Ajax发送网络请求

目录

1.实例化一个XMLHttpRequest对象

2. 和服务器尽力链接，打开连接

3.建立连接

4.服务器给客户端响应

---

1.实例化一个XMLHttpRequest对象

XMLHttpRequest 对象是JS提供的内置对象，专门用来发送AJAX请求的。

var xhr=new XMLHttpRequest();

2. 和服务器尽力链接，打开连接

URL相对于执行代码的当前也页面（当然也可以使用绝对路径）；而是调用open()方法并不会真正发送请求，而只是启动一个请求以备发送。

xhr.open('get','data.xml',true); //三个参数：1.get/post请求 2.url本地连接 3.是否异步true/false

• get:GET是最常见的请求类型，最常用于向服务器查询某些信息。必要时，可以将查询字符串参数追加到URL的末尾，以便将信息发送给服务器。对XHR而言，位于传入open()方法的URL末尾的查询字符串必须经过正确的编码才行。
• post:使用频率仅次于GET的是POST请求，通常用于向服务发送应该被保存的数据。POST请求应该把数据作为请求的主题提交，而GET请求传统上不是这样。POST请求的主题可以包含非常多的数据，而且格式不限。在open()方法第一个参数的位置传入”post”，就可以初始化一个POST请求.

3.建立连接

这里的send()方法接受一个参数，既要作为请求主题发送的数据。如果不需要通过请求主题发送数据，则不许传入null，因为这个参数对有些浏览器来说是必须的。调用send()之后，请求会被分派到服务器。

xhr.send(null)

4.服务器给客户端响应

 xhr.onreadystatechange = function(){
        if(xhr.readyState === 4 && xhr.status === 200){//成功
             // responseText 返回的是纯文本格式。
             console.log(xhr.responseText);
            
            // responseXML 返回XML格式的数据，可以通过DOM操作数据。
            console.log(xhr.responseXML.querySelector('form'));

            // 选择/本地的请求的URL信息
            console.log(xhr.responseURL);

            // 响应的类型
            console.log(xhr.responseType);

            // 响应的对象
            console.log(xhr.response);
        }
    }

addURLParam()函数接受三个参数：要添加参数的URL、参数的名称和参数的值。这个函数首先检查URL是否包含问号（以确定是否已经有参数存在）。如果没有，就添加一个问号；否则，就添加一个和号。然后，将参数名称和值进行编码，再添加到URL的末尾。最后返回添加参数之后的URL

作用：addURLParam()函数可以确保查询字符串的格式良好，并可靠地用于XHR对象。

function addURLParam(url, name, value) {
    url += url.indexOf("?") == -1 ? "?" : "&";
    url += encodeURIComponent(name) + "=" + encodeURIComponent(value);
    return url;
}
var url = "example.php";
url = addURLParam(url, "name", "Nicholas");
url + addURLParam(url, "book", "Professional Javascript");
xhr.open("get", url, false);