Ajax工作流程

Ajax:在不刷新頁(yè)面的情況下向服務(wù)器請(qǐng)求數(shù)據(jù)

1.創(chuàng)建XMLHttpRequest對(duì)象(俗稱小黃人)

var xhr = new XMLHttpRequest();

XMLHttpRequest ： http請(qǐng)求對(duì)象，負(fù)責(zé)實(shí)現(xiàn)ajax技術(shù)

2.設(shè)置請(qǐng)求

xhr.open('get', 'url');

url:服務(wù)器地址

3.發(fā)送請(qǐng)求

xhr.send();

4.注冊(cè)回調(diào)函數(shù)

xhr.onload = function () {

console.log(xhr.responseText);

}

xhr.responseText:請(qǐng)求返回的內(nèi)容

這個(gè)函數(shù)不是立即執(zhí)行的，而是等服務(wù)器把數(shù)據(jù)響應(yīng)返回才會(huì)執(zhí)行(PS：什么時(shí)候執(zhí)行取決于你的網(wǎng)速快慢)

get請(qǐng)求

案例:英雄外號(hào)

接口文檔：查詢英雄外號(hào)

請(qǐng)求地址：https://autumnfish.cn/api/hero/simple

請(qǐng)求方法：get

請(qǐng)求參數(shù)：name

1.get傳參格式：url?key=value

2.示例： https://autumnfish.cn/api/hero/simple?name=亞索

Documenttitle>

text-align: center;

}

.name {

color: deepskyblue;

}

.title {

color: red;

}style>

head>

英雄查詢h1>

span>---span>h2>

body>

html>

/*

- 請(qǐng)求地址：https://autumnfish.cn/api/hero/simple

- 請(qǐng)求方法：get

- 請(qǐng)求參數(shù)：name

- 響應(yīng)內(nèi)容：英雄外號(hào)

*/

/*思路分析

1.給search按鈕注冊(cè)點(diǎn)擊事件

2.獲取hero輸入框文本

3.通過ajax調(diào)用接口：參數(shù)為輸入框文本

4.數(shù)據(jù)返回之后顯示到title標(biāo)簽中

*/

//1.注冊(cè)點(diǎn)擊事件

$('.search').on('click', function () {

//2.獲取輸入框文本

var heroName = $('.hero').val();

//3.ajax請(qǐng)求數(shù)據(jù)

//(1).實(shí)例化ajax對(duì)象

var xhr = new XMLHttpRequest();

//(2).設(shè)置請(qǐng)求方法和地址

//get請(qǐng)求的數(shù)據(jù)直接添加在url的后面 格式是 url?key=value

xhr.open('get', 'https://autumnfish.cn/api/hero/simple?name=' + heroName);

//(3).發(fā)送請(qǐng)求

xhr.send();

//(4).注冊(cè)回調(diào)函數(shù)

xhr.onload = function() {

$('.title').text(heroName + ':' + xhr.responseText);

};

});script>

post請(qǐng)求

案例:用戶注冊(cè)

請(qǐng)求地址：https://autumnfish.cn/api/user/register

請(qǐng)求方法：post

請(qǐng)求參數(shù)：username

post請(qǐng)求：

1.需要設(shè)置請(qǐng)求頭(固定語法)：xhr.setRequestHeader(‘Content-type’,‘a(chǎn)pplication/x-www-form-urlencoded’)

* 注意：這是固定格式，錯(cuò)一個(gè)字母都不行，強(qiáng)烈建議復(fù)制粘貼

2.使用xhr的send方法發(fā)送參數(shù)： xhr.send(‘參數(shù)名=參數(shù)值’);

* 注意：不要加前面的?

Documenttitle>

color: red;

}style>

head>

用戶注冊(cè)h2>

span>

body>

html>

/*

請(qǐng)求方法get和post區(qū)別： 傳參方式不同

get請(qǐng)求： 直接在url后面拼接參數(shù)

* 參數(shù)在url中，安全性不高

post請(qǐng)求：

1.需要設(shè)置請(qǐng)求頭(固定語法)：xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded')

* 注意：這是固定格式，錯(cuò)一個(gè)字母都不行，強(qiáng)烈建議復(fù)制粘貼

2.使用xhr的send方法發(fā)送參數(shù)： xhr.send('參數(shù)名=參數(shù)值');

* 注意：不要加前面的?

*/

/*

用戶注冊(cè)

- 請(qǐng)求地址：https://autumnfish.cn/api/user/register

- 請(qǐng)求方法：post

- 請(qǐng)求參數(shù)：username

1. 注冊(cè)點(diǎn)擊事件 : submit

2. 獲取輸入框文本：username

3. 通過ajax調(diào)用接口：參數(shù)為輸入框文本

4. 數(shù)據(jù)返回之后顯示到info中

*/

$(function () {

//1.注冊(cè)點(diǎn)擊事件

$('.submit').on('click', function () {

//2.獲取輸入框文本

var username = $('.username').val();

//3.ajax發(fā)送請(qǐng)求

//(1).實(shí)例化ajax對(duì)象

var xhr = new XMLHttpRequest();

//(2).設(shè)置請(qǐng)求方法和地址

xhr.open('post', 'https://autumnfish.cn/api/user/register');

//(3).設(shè)置請(qǐng)求頭(post請(qǐng)求才需要設(shè)置)

xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');

//(4).發(fā)送請(qǐng)求 ： 參數(shù)格式 'key=value'

xhr.send('username=' + username);

//(5).注冊(cè)回調(diào)函數(shù)

xhr.onload = function () {

$('.info').text(xhr.responseText);

};

});

});script>

請(qǐng)求方法get和post區(qū)別

傳參方式不同

get請(qǐng)求：

直接在url后面拼接參數(shù)

* 參數(shù)在url中，安全性不高

post請(qǐng)求：

1.需要設(shè)置請(qǐng)求頭(固定語法)：xhr.setRequestHeader(‘Content-type’,‘a(chǎn)pplication/x-www-form-urlencoded’)

* 注意：這是固定格式，錯(cuò)一個(gè)字母都不行，強(qiáng)烈建議復(fù)制粘貼

2.使用xhr的send方法發(fā)送參數(shù)： xhr.send(‘參數(shù)名=參數(shù)值’);

* 注意：不要加前面的?

JSON數(shù)據(jù)格式解析

JSON格式

通用的數(shù)據(jù)格式，很多語言都支持，不同語言中解析他的方式不同

js中對(duì)應(yīng)JSON的使用 2個(gè)方法

JSON是一種數(shù)據(jù)格式，本質(zhì)是字符串 作用： 解決跨平臺(tái)的問題，一般服務(wù)器返回的數(shù)據(jù)都是json格式

JSON格式特點(diǎn) a. 屬性名和屬性值都是字符串(需要使用雙引號(hào)包括)

b. 如果屬性值是布爾類型和數(shù)字類型，則可以省略字符串

.JSON格式與JS對(duì)象互轉(zhuǎn)

JSON->JS : JSON.parse(json數(shù)據(jù))

JS->JSON ：JSON.stringify(js對(duì)象)

模板引擎art-template

模板引擎art-template使用流程

1.導(dǎo)入模板引擎art-template.js文件

2.寫HTML模板

模板寫到script標(biāo)簽中

必須要設(shè)置id

必須要設(shè)置type(一般為 type=“text/html”)

3.調(diào)用art-template的官方API開始解析模板

var htmlStr = template('tpl', jsonObj.data);

第一個(gè)參數(shù)： html模板的id名

第二個(gè)參數(shù)： 要渲染的數(shù)據(jù)

返回值： 渲染數(shù)據(jù)之后的html字符串

4.將解析好的模板顯示到頁(yè)面

document.body.innerHTML = htmlStr;

模板引擎語法介紹

輸出

標(biāo)準(zhǔn)語法

{{value}}

{{data.key}}

{{data['key']}}

{{a ? b : c}}

{{a || b}}

{{a + b}}

原始語法

條件

標(biāo)準(zhǔn)語法

{{if value}} ... {{/if}}

{{if v1}} ... {{else if v2}} ... {{/if}}

原始語法

...

... ...

循環(huán)

標(biāo)準(zhǔn)語法

{{each target}}

{{$index}} {{$value}}

{{/each}}

原始語法

ajax 項(xiàng)目經(jīng)驗(yàn)總結(jié)

1.模板引擎支持字符串的方法 indexOf() split()

2.如果一段代碼在多個(gè)地方執(zhí)行,可以使用函數(shù)封裝

可以自己寫一個(gè)函數(shù)封裝

事件本事就是一種函數(shù)封裝,可以主動(dòng)觸發(fā)事件

$().click

$().trigger(‘click’)

3.loading加載效果

布局思路:使用gif動(dòng)圖實(shí)現(xiàn)

實(shí)現(xiàn)思路:ajax之前出現(xiàn) ajax響應(yīng)后消失

4.模板引擎的數(shù)據(jù)可以是ajax響應(yīng)返回的,也可以是自己寫的

5.模板引擎的數(shù)據(jù)并不是全部都是替換操作html() , 也有可能是append()添加操作。取決于需求

6.非空判斷與文本清空

非空判斷:ajax發(fā)送之前

文本清空:ajax發(fā)送之后

7.文件預(yù)覽(固定方式)

8.文件上傳(固定方式)

9.頁(yè)面間傳值

sessionStorage :適合傳多個(gè)數(shù)據(jù)

window.location.href:適合傳少量數(shù)據(jù)

總結(jié)

以上是生活随笔為你收集整理的ajax拼接显示不同样式,Ajax重点整理的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。