4步:
//1. 例項化xhr物件
//2. 呼叫open方法準備ajax請求
//引數1: 請求方式 (get、post、delete、put)
//引數2: 請求的伺服器端的位址
//引數3: true(非同步、預設)、false(同步)
xhr.open('get', '/getdata');
//3. 呼叫send方法傳送ajax請求
xhr.send();
//4. 呼叫onload事件,配合responsetext來接收伺服器端返回的資料
// xhr.responsetext: 以字串形式來接收伺服器端返回的結果
// 伺服器端返回的資料有兩種可能:
// 1) 普通字串(hello world \ i am xiaoming)
// 2) json字串('')
// json字串都會使用 json.parse 轉回成物件形式
xhr.onload = function ()
get引數要拼接在url位址的後面,以?進行分割
//引數2的位置用來拼接get引數, 以 ? 作為分隔符
// ?之前: 請求的url位址
// ?之後: 查詢引數 key1=value1&key2=value2&...
xhr.open('get', '/getdata?id=1&name=zs&age=20&...');
xhr.send();
xhr.onload = function ()post傳參有三種方式: key=value&key=value&... formdata json字串
//1. key=value&key=value&...
xhr.open('post', '/postdata');
//將傳送到伺服器端的資料寫成乙個字串
var str = 'id=1&name=zs&age=20&...'
xhr.send(str);
xhr.onload = function ()
//2. 傳送formdata型別的資料
//1) 直接獲取整個post表單的資料
var fm = document.queryselector('form');
var fd = new formdata(fm)
var fd = new formdata();
//傳送ajax請求時,如果傳送到伺服器端的資料為formdata時,不需要設定請求頭,需要將fd作為引數傳入send
xhr.open('post', '/postdata');
xhr.send(fd);
xhr.onload = function ()
//3. 傳送到伺服器端的資料是json字串
var jsonstr = json.stringify(); //''
xhr.open('post', '/postdata');
xhr.send(jsonstr);
xhr.onload = function ()
axios 請求資料,以及和ajax的區別
相同點 axios 和 ajax 都是用於請求資料渲染頁面 不同點 1 ajax 實現了網頁的區域性資料重新整理 axios實現了對ajax的封裝,使用了promise模式,使用then鏈,來處理js非同步程式設計 在vue專案中,使用axios來獲取本地資料 上面8個圖示文字,儲存在本地資料中,用...
原生ajax的封裝寫法以及總結
1.原生 ajax get 請求 2.原生 ajax post 請求 3.封裝 ajax 請求步驟 1 建立xhr 2 監聽xhr.onreadystatechange事件 ajax狀態發生變化的事件 3 判斷ajax請求的狀態 4 設定請求方式和url 5 傳送請求 使用xhr物件傳送get方式請...
資料基礎 資料以及資料集的操作
資料和資料集 元素 物件 容器資料元素 算數運算 代數運算 邏輯運算 位移運算增 刪 改 查 初始化 遍歷 排序 iterator 資料型別轉換 包含 常見keys 刪除 remove del pop clear delete drop truncate 改 set 查 take get endsw...