原生AJAX的操作(五步寫法,相容,封裝,跨域)

2021-10-14 23:47:52 字數 3439 閱讀 6537

<

!doctype html>

"en"

>

"utf-8"

>

<

/title>

<

/head>

/*第一步:建立ajax物件*/

;/*第二步:建立伺服器連線

* open()

* args:

* 1.傳送請求的引數 get post

* 2.api路徑

* 3.async 返回true/false 同步或非同步

* 同步:等待請求完成之後再執行後續**

* 非同步:請求和後續**一起執行

* 4.連線介面的賬號

* 5.連線介面的密碼

/*第三步:傳送請求

* send();

* 如果是get請求 send()不寫引數 傳遞到後台的資料還在,在路徑後面以 ?id&name=zzz格式放著

* 如果是post請求 新增引數 send(date);

;/*第四步:監聽伺服器響應狀態

* 如果伺服器響應

http.status 200 伺服器響應成功 500 伺服器報錯 404 頁面丟失

0: 請求未初始化

1: 伺服器連線已建立

2: 請求已接收

3: 請求處理中

4: 請求已完成,且響應已就緒

響應完成之後資料在

http.respon***ml xml資料

/*第五步:渲染介面*/

/html>

用來測試的node伺服器 cros,jsonp配置

let express=

require

("express");

express()

;//後台配置cros跨域

use(

(req,res,next)

=>);

get(

"/",

(req,res)

=>);

//get請求介面

get(

"/getstudentinfo"

,(req,res)

=>);

//jsonp跨域介面

}}/* * 在請求介面的時候 出現錯誤

* no 'access-control-allow-origin'

* 涉及到跨域資源共享的問題

* */

ajax

('get'

,'',null

,function

(ags));

<

/script>

<

/body>

<

/html>

原生ajax 五步法寫ajax 相容

區域性重新整理技術 ajax請求 請求後端介面,返回資料到前端,前端根據需求渲染到介面 五步法寫ajax 1.建立ajax物件 2.建立伺服器連線 open 的引數 1 傳送請求的引數 get post 2 api路徑 3 async 同步或者非同步 值為 true非同步 false同步 可寫可不寫...

js原生的ajax寫法

一直都在用jquery的ajax寫法,卻忘記原生的ajax寫法了,今天覆習一遍。先宣告乙個非同步請求物件 如果例項化成功,就呼叫open 方法,就開始準備向伺服器傳送請求 設定函式doresult function doresult 原生的js的ajax寫法主要有三點 1 建立非同步請求物件 非同步...

原生ajax的封裝寫法以及總結

1.原生 ajax get 請求 2.原生 ajax post 請求 3.封裝 ajax 請求步驟 1 建立xhr 2 監聽xhr.onreadystatechange事件 ajax狀態發生變化的事件 3 判斷ajax請求的狀態 4 設定請求方式和url 5 傳送請求 使用xhr物件傳送get方式請...