javascript
js-ajax-,JavaScript实现Ajax
1：基本概念
jQuery的Ajax請求實際上是封裝的一個XHLHttpRequest，從字面意思來看是，XML是一種文件格式，Http是一個網絡請求，Request最開始是用于請求XML文件的，后來不斷擴展可以請求多種類型的文件。
XHLHttpRequest，網絡請求模塊，或者是一個瀏覽器網絡線程。用于從URL網絡上獲取數據，有了對象，就可以實現頁面的無刷新請求數據，就可以做到一個局部的更新，也可以獲取多種類型的數據(ftp、文件)。
2：要實現和使用XMLHttpRequest
它是一個對象，首先我們需要實例化，定義一個：
var xhr = new XMLHttpRequest();
3：初始化請求，給定一些必要的配置，給它一些property
//Ajax請求時的參數設置
method 請求方式
url 請求地址
async 是否異步
user 用戶名
password 密碼
xhr.open(method,url,async,user,password);
4：發送請求(encodeURLComponent)
xhr.send(data);
等待接收
5：接收網絡請求返回
一般有如下屬性：
responseText，請求返回的數據內容，可以是一段文本，是一段二進制或者是一個json
responseXML，是一個文件，如果響應頭內容是text/xml，這個屬性將保留響應數據的XML、DOM文檔。
status，響應的HTTP狀態，如 200(正常，200-300之間都表示成功) 304(使用緩存) 404(沒找到) 500(服務器內部錯誤)等
statusText，HTTP狀態說明
readyStatus，請求/響應過程的當前活動階段，一共有5個值：0(未被調用open)，1(已被調用open但未發送)，2(已調用send)，3(已接收到請求返回的數據)，4(請求已完成)。
timeout，設置請求超時時間
xhr.onreadystatechange = () => {
if (xhr.readyStatus === 4) {
/* HTTP 狀態在 200-300 之間表示請求成功 */
/* HTTP 狀態為 304 表示請求內容未發生改變，可直接從緩存中讀取 */
if (xhr.status >= 200 &&
xhr.status < 300 ||
xhr.status == 304) {
console.log('請求成功', xhr.responseText)
}
}
}
6：封裝(promise)
function ajax (options) {
/* 獲取請求地址 */
let url = options.url;
/* 獲取請求方法 */
const method = options.method.toLocaleLowerCase() || 'get';
/* 默認異步 */
const async = options.async != false;
/* 獲取請求request數據 */
const data = options.data;
/* 實例化XMLHttpRequest */
const xhr = new XMLHttpRequest();
/* 設置超時時間 */
if (options.timeout && options.timeout > 0) {
xhr.timeout = options.timeout
}
return new Promise ( (resolve, reject) => {
/* 添加超時回調 */
xhr.ontimeout = () => reject && reject('請求超時');
/* 成功回調 */
xhr.onreadystatechange = () => {
if (xhr.readyState == 4) {
if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
resolve && resolve(xhr.responseText);
} else {
reject && reject();
}
}
}
/* 失敗回調 */
xhr.onerror = err => reject && reject(err);
/* 拼接參數 */
let paramArr = [];
let encodeData;
if (data instanceof Object) {
for (let key in data) {
paramArr.push( encodeURIComponent(key) + '=' + encodeURIComponent(data[key]) );
}
encodeData = paramArr.join('&');
}
/* get請求 */
if (method === 'get') {
const index = url.indexOf('?')
if (index === -1) url += '?'
else if (index !== url.length -1) url += '&'
url += encodeData
}
/* 初始化請求 */
xhr.open(method, url, async);
/* get直接發送拼接的URL */
if (method === 'get') xhr.send(null);
if (method === 'post') {
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded;charset=UTF-8')
xhr.send(encodeData)
}
})
}
總結：
關于網絡請求，一般常用的有四種：
一個是get，獲取網絡資源
然后是post，一般用于提交數據，提交數據的參數是放在請求的body里面的
delete，刪除
put，標準的一個修改
關于Http的簡單請求和非簡單請求或者是跨域，在跨域時由于瀏覽器的安全機制，涉及到一個問題關于在Ajax請求 ，是在請求之后還是請求之前判斷跨域，這時候就需要了解一下簡單請求和復雜請求。
簡單請求是先把資源請求回來，然后再去判斷是否跨域。如果是一個復雜請求，瀏覽器會先去發送一個嗅探或者是欲請求(一般是一個option)，先判斷是否跨域，如果不是跨域那就執行，如果是跨域那就直接不請求了。一般來講，如果get不修改它的Content-Type，那么基本上都是簡單請求。post如果采用www-form的形式，也是一個簡單請求。
這篇文章主要是分享了Javascript中XMLHttpRequest對象的基本屬性和方法, 從實例化、初始化、發送和接受四個階段完成了Ajax網絡請求核心內容封裝。
總結
以上是生活随笔為你收集整理的js-ajax-,JavaScript实现Ajax的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 如何应对互联网界的奇葩面试题！
- 下一篇： cad图纸问号怎么转换文字_CAD打开图