原生ajax底層原理

傳統方法的缺點

　　傳統的web交互是用戶觸發一個http請求服務器,然後服務器收到之後,在做出響應到用戶,並且返回一個新的頁面,,每當服務器處理客戶端提交的請求時,客戶都只能空閒等待,並且哪怕只是一次很小的交互、只需從服務器端得到很簡單的一個數據,都要返回一個完整的HTML頁,而用戶每次都要浪費時間和帶寬去重新讀取整個頁面。這個做法浪費了許多帶寬，由於每次應用的交互都需要向服務器發送請求，應用的響應時間就依賴於服務器的響應時間。這導致了用戶界面的響應比本地應用慢得多。

什麼是ajax

　　ajax的出現,剛好解決了傳統方法的缺陷。AJAX 是一種用於創建快速動態網頁的技術。通過在後臺與服務器進行少量數據交換，AJAX 可以使網頁實現異步更新。這意味着可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。

XMLHttpRequest 對象

　　XMLHttpRequest對象是ajax的基礎,XMLHttpRequest 用於在後臺與服務器交換數據。這意味着可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。目前所有瀏覽器都支持XMLHttpRequest

 

方    法	描    述
abort()	停止當前請求
getAllResponseHeaders()	把HTTP請求的所有響應首部作爲鍵/值對返回
getResponseHeader("header")	返回指定首部的串值
open("method","URL",[asyncFlag],["userName"],["password"])	建立對服務器的調用。method參數可以是GET、POST或PUT。url參數可以是相對URL或絕對URL。這個方法還包括3個可選的參數，是否異步，用戶名，密碼
send(content)	向服務器發送請求
setRequestHeader("header", "value")	把指定首部設置爲所提供的值。在設置任何首部之前必須先調用open()。設置header並和請求一起發送 ('post'方法一定要 )

readyState的五種狀態

1. 請求尚未初始化, 已經創建了一個XMLHttpRequest對象
2. 服務器鏈接已經建立, 已經調用了XMLHttpRequest對象的open方法，並且XMLHttpRequest對象已經準備好將一個請求發送到服務器端
3. 請求已經發送, 已經通過send方法把一個請求發送到服務器端，但是還沒有收到一個響應
4. 請求處理中, 已經接收到HTTP響應頭部信息，但是消息體部分還沒有完全接收到
5. 請求完成, 且響應已經就緒

請求步驟

　　1.創建XMLHTTPRequest對象

　　2.註冊事件

       3.使用open方法設置和服務器的交互信息

　　4.設置發送的數據，開始和服務器端交互

創建後臺測試接口

爲了測試，我實現了簡單的ssm，創建了Controller層接口

請求連接爲http://localhost:8080/myssm/test/test，入參爲id=1

package com.controller;

import com.pojo.UserEntity;
import com.service.TestService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

@RequestMapping("test")
@Controller
public class TestController {

    @Autowired
    private TestService testService;

    @RequestMapping("test")
    @ResponseBody
    public UserEntity test(String id){
        return testService.test(Integer.parseInt(id));
    }
}

原生ajax實現GET請求 

    //創建XMLHttpRequest對象
    var xmlHttpRequest = new XMLHttpRequest();
    //重寫onreadystatechange方法，狀態改變就會調用，如果readyState==4&&xmlHttpRequest.status == 200，說明請求成功且有返回
    xmlHttpRequest.onreadystatechange = function(){
        if(xmlHttpRequest.readyState ==4 && xmlHttpRequest.status == 200){
            console.log(xmlHttpRequest.responseText);
            alert(xmlHttpRequest.responseText);
        }
    };
    //設置請求的url參數,參數一是請求的類型,參數二是請求的url,可以帶參數,動態的傳遞參數starName到服務端
    xmlHttpRequest.open('GET','http://localhost:8080/myssm/test/test?id=1');
    //發送ajax請求
    xmlHttpRequest.send();

原生ajax實現POST請求

    //創建XMLHttpRequest對象
    var xmlHttpRequest = new XMLHttpRequest();
    //重寫onreadystatechange方法，如果readyState==4&&xmlHttpRequest.status == 200，說明請求成功且有返回
    xmlHttpRequest.onreadystatechange = function(){
        if(xmlHttpRequest.readyState ==4 && xmlHttpRequest.status == 200){
            console.log(xmlHttpRequest.responseText);
            alert(xmlHttpRequest.responseText);
        }
    };
    //設置請求的url參數,參數一是請求的類型,參數二是請求的url,可以帶參數,動態的傳遞參數starName到服務端
    xmlHttpRequest.open('POST','http://localhost:8080/myssm/test/test');
    //設置數據內容類型爲application/x-www-form-urlencoded
    xmlHttpRequest.setRequestHeader('Content-type','application/x-www-form-urlencoded');
    //發送ajax請求
    xmlHttpRequest.send('id=1');

使用原生Ajax實現的GET和POST請求的區別

1. 請求方式不同，一個是GET，一個是POST
2. 請求參數存放的位置，GET的請求參數直接拼接在url後面，POST的請求參數存放在body體中且需要設置請求數據類型爲application/x-www-form-urlencoded