AJAX基础知识

什么是AJAX：

AJAX = 异步 JavaScript 和 XML。 AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。

这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。 传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。

AJAX简介：

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下，更新页面的数据。

同步和异步：

同步：必须等待当前事情完成之后，才能进行其他事情

异步: 不需要等待当前事情完成，同时进行，多件事情互不干扰

创建XMLHttpRequest 对象：

XMLHttpRequest 对象 所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。

XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。

<script>
    // 现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象
    // 创建XMLHttpRequest对象
    var xhr = new XMLHttpRequest()
    // IE5、IE6通过new ActiveXObject创建
    var Xhr1 = new ActiveXObject('Microsoft.XMLHTTP')
</script>

 为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ：

<script>
    // 为了兼容IE5、IE6 
    var xhr
    // 判断当前浏览器是否支持XMLHttpRequest的方式创建
    if(window.XMLHttpRequest){
        xhr = new XMLHttpRequest()
    }else{
        xhr = new ActiveXObject('Microsoft.XMLHTTP')
    }
</script>

readState-onreadystatechange 事件:

onreadystatechange 事件 当请求被发送到服务器时，我们需要执行一些基于响应的任务。

每当 readyState 改变时，就会触发 onreadystatechange 事件。

readyState 属性存有 XMLHttpRequest 的状态信息。

readyState属性：

0: 请求未初始化

1: 服务器连接已建立

2: 请求已接收

3: 请求处理中

4: 请求已完成，且响应已就绪

xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && xhr.status == 200) {
    }
}

status属性：

200: "OK"

404: 未找到页面

// 为了兼容IE5、IE6 
    var xhr
    // 判断当前浏览器是否支持XMLHttpRequest的方式创建
    if(window.XMLHttpRequest){
        xhr = new XMLHttpRequest()
    }else{
        xhr = new ActiveXObject('Microsoft.XMLHTTP')
    }
    // 通过xhr 添加监听state状态的事件
    xhr.onreadstatechange = function(){
        if(xhr.readyState==4 && xhr.status == 200){
            
        }
    }
</script>

向服务器发送请求：

xhr.open('GET','http://localhost:8888/home',true)
xhr.send()

open（method,url,async）规定请求的类型、url、以及是否异步处理请求

method：请求的类型，GET和POST

url：文件在服务器上的位置

async：true（异步）、false（同步）

send（string）将请求发送到服务器

String：仅用于POST请求

GET方式：

<script>
    // 为了兼容IE5、IE6 
    var xhr
    // 判断当前浏览器是否支持XMLHttpRequest的方式创建
    if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest()
    } else {
        xhr = new ActiveXObject('Microsoft.XMLHTTP')
    }
    // 通过xhr 添加监听state状态的事件
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
            // 解析JSON
            var data = JSON.parse(xhr.responseText)
            console.log(data);
        }
    }
    // http 协议 https ftp...
    // 49.233.3.222 ip地址
    // 8888 端口号
    // home/goods 路径
    // get请求 才会将参数拼接在路径后边
    // ?type=pop&page=10 参数 多个参数之间用&拼接
    // http://49.233.3.222:8888/home/goods?type=pop&page=10
    // 做请求的规定：请求方式、请求路径、是否是异步
    xhr.open('get', 'http://49.233.3.222:8888/home', true)
    xhr.open('get', 'http://49.233.3.222:8888/home/goods?type=pop&page=10', true)
    // 发送请求 get不传参数
    // post请求才传参数
    xhr.send()
</script>

POST方式：

<script>
    // 为了兼容IE5、IE6 
    var xhr
    // 判断当前浏览器是否支持XMLHttpRequest的方式创建
    if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest()
    } else {
        xhr = new ActiveXObject('Microsoft.XMLHTTP')
    }
    // 通过xhr 添加监听state状态的事件
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
            // 解析JSON
            var data = JSON.parse(xhr.responseText)
            console.log(data);
        }
    }
    xhr.open('post', 'http://49.233.3.222:8888/user/login', true)
    // post请求才传参数
    var user = {
        "tel": "17602900172",
        "password": "admin123"
    }
    // 设置请求头  请求数据的类型
    xhr.setRequestHeader("Content-type","application/json");
    // JSON.stringify(user) 转换json格式
    xhr.send(JSON.stringify(user))
</script>

GET、POST区别：

GET 传输有限，只能传输255个字符。

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。

然而，在以下情况中，请使用 POST 请求：无法使用缓存文件（更新服务器上的文件或数据库）

向服务器发送大量数据（POST 没有数据量限制）

发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

 

服务器响应：

如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性

responseText：获得字符串形式的响应数据

// responseText 属性
document.getElementById("myDiv").innerHTML = xhr.responseText

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

// responseXML 属性
var xmlDOC = xhr.responseXML
var titles = xmlDOC.getElementsByTagName('title')
var txt = `<ul>`
for (i = 0; i < titles.length; i++) {
	txt += `<li>${titles[i].childNodes[0].nodeValue}</li>`;
}
txt += '</ul>'
document.getElementById("myDiv").innerHTML = txt;

<script>
    // 为了兼容IE5、IE6 
    var xhr
    // 判断当前浏览器是否支持XMLHttpRequest的方式创建
    if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest()
    } else {
        xhr = new ActiveXObject('Microsoft.XMLHTTP')
    }
    // 通过xhr 添加监听state状态的事件
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
         document.getElementById('box').innerText = xhr.responseText
        }
    }
    xhr.open('get', 'http://49.233.3.222:8888/home', true)
    xhr.send()
</script>

<script>
    // 为了兼容IE5、IE6 
    var xhr
    // 判断当前浏览器是否支持XMLHttpRequest的方式创建
    if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest()
    } else {
        xhr = new ActiveXObject('Microsoft.XMLHTTP')
    }
    // 通过xhr 添加监听state状态的事件
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
            var docXML = xhr.responseXML
            var title = docXML.getElementsByTagName('title')
            var str = '<ul>'
            for (var item of title) {
                str += `
                    <li>${item.childNodes[0].nodeValue}</li>
                `
            }
            str += '</ul>'
            document.getElementById('box').innerHTML = str
        }
    }
    xhr.open('get', './books.xml', true)
    xhr.send()