前端jquery如何访问后端--Ajax工作原理（异步请求）

ajax 的全称是Asynchronous JavaScript and XML，其中，Asynchronous 是异步的意思，它有别于传统web开发中采用的同步的方式。

ajax() 方法通过 HTTP 请求加载远程数据。

AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。AJAX = 异步 JavaScript 和 XML。AJAX 是一种用于创建快速动态网页的技术。

XMLHttpRequest 对象是 AJAX 的基础。XMLHttpRequest 用于在后台与服务器交换数据。所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。

XMLHttpRequest是ajax的核心机制，如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法。

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

readyState 属性存有 XMLHttpRequest 的状态信息。每当 readyState 改变时，就会触发 onreadystatechange 事件。

XMLHttpRequest对象的属性：

onreadystatechange 每次状态改变所触发事件的事件处理程序。

responseText 从服务器进程返回数据的字符串形式。

responseXML 从服务器进程返回的DOM兼容的文档数据对象。

status 从服务器返回的数字代码，比如常见的404（未找到）和200（已就绪）

status Text 伴随状态码的字符串信息

readyState 对象状态值：

​ 1、(未初始化) 对象已建立，但是尚未初始化（尚未调用open方法）

​ 2、(初始化) 对象已建立，尚未调用send方法

​ 3、(发送数据) send方法已调用，但是当前的状态及http头未知

​ 4、(数据传送中) 已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错 误，

​ 5、(完成) 数据接收完毕,此时可以通过通过responseXml和responseText获取完整的回应数据

其他方法：

原生Ajax请求GET方式：

<button>点击发送请求</button>
<div id="res"></div>
<script>
    const btn = document.getElementsByTagName('button')
	const result = document.getElementById('res')
	btn[0].onclick = function (){
	    //创建对象
	    const xhr = new XMLHttpRequest()
	    //设置请求方法和url
	    xhr.open('GET', 'http://localhost:8000/server')
	    //发送
	    xhr.send()
	    //事件绑定 处理服务端返回的结果
	    xhr.onreadystatechange = function (){
	        if(xhr.readyState === 4){ //服务端返回了所有结果
	            if(xhr.status >= 200 && xhr.readyState<=300){  //2开头的都表示成功
	                //处理结果
	                console.log(xhr.status) //状态码
	                console.log(xhr.statusText) //状态字符串
	                console.log(xhr.getAllResponseHeaders) //所有响应头
	                console.log(xhr.response) //响应体
	                result.innerHTML = xhr.response
	            }
	        }
	   
	}
</script>

原生Ajax请求POST方式：

<div id="res"></div>
<script>
    const result = document.getElementById('res')
	result.onmouseover = function(){
	    const xhr = new XMLHttpRequest()
	    xhr.open('POST', 'http://localhost:8000/server')
	    //设置请求头
	    //contentType
	    //类型：String
	    //默认值: "application/x-www-form-urlencoded"。发送信息至服务器时内容编码类型。
	    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')//必须写在open和send中间
	    xhr.send('a=100&b=200&c=3')
	    xhr.onreadystatechange = function(){
	        if(xhr.readyState === 4){
	            if(xhr.status >= 200 && xhr.status<300){
	                result.innerHTML = xhr.response
	            }
	        }
	    }
	}
</script>

Jquery-Ajax请求GET方式：

function JqueryAjaxGET(){
    $.get('http://localhost:8000/jquery-server', {a:100, b:200}, function(data){
        console.log(data)
    })
}

Jquery-Ajax请求POST方式：

function JqueryAjaxPOST(){
    $.post('http://localhost:8000/jquery-server', {a:100, b:200}, function(data){
        console.log(data)
    }, 'json')
})

Jquery-Ajax请求通用型方式：

function JqueryAjaxTY(){
    $.ajax({
        //url
        url:'http://localhost:8000/jquery-server',
        //参数
        data:{a:100, b:222},
        //请求类型
        type:'GET',
        //响应体结果
        dataType:'json',
        //成功的回调
        success:function(data){
            console.log(data)
        },
        //超时时间
        timeout:2000,
        //失败的回调
        error:function(){
            console.log('出错了')
        },
        //头信息设置
        headers:{
            c:300,
            d:400
        }
    })
})