基于原生ajax與封裝的ajax使用方法(詳解)
當(dāng)我們不會(huì)寫后端接口來測試ajax時(shí),我們可以使用node環(huán)境來模擬一個(gè)后端接口。
1、模擬后端接口可參考網(wǎng)站整站開發(fā)小例子,在打開命令窗口并轉(zhuǎn)到所在項(xiàng)目文件夾下在命令行中輸入npm install express --save,安裝express中間件。


2、把當(dāng)中的app.js的內(nèi)容換成
var express=require('express');
//var path=require('path');
var app=express();
//app.set('view',path.join(__dirname,'views')); //在views目錄下搜索所有模板
app.engine('html',require('ejs').__express); //讓ejs能夠識(shí)別后綴為'.html'的文件 or app.engine("html",require("ejs").renderFile);
app.set('view engine','html');//在調(diào)用render函數(shù)時(shí)能自動(dòng)為我們加上'.html' 后綴。如果沒有第二句,我們就得把res.render(‘users')寫成res.render(‘users.html'),否則會(huì)報(bào)錯(cuò)
var service=require('./webService/service.js');
app.use('/public',express.static('public'));
app.get('/',function(req,res){ //路由HTTP GET請求到有特殊回調(diào)的特殊路徑。
res.render('index');
});
app.get('/ajax/index',function(req,res){ //創(chuàng)建了一個(gè)模擬后端接口
res.send(service.get_index_data());
});
/*若路徑找不到,都返回404報(bào)錯(cuò)頁面*/
app.use(function(req,res,next){
var err=new Error('this page Not found');
err.status=404;
next(err);
});
app.listen(3003); //在瀏覽器輸入localhost:3003即可瀏覽
3、index.json內(nèi)容
{
"items":"Express 是一個(gè)自身功能極簡,完全是由路由和中間件構(gòu)成一個(gè)的 web 開發(fā)框架:從本質(zhì)上來說,一個(gè) Express 應(yīng)用就是在調(diào)用各種中間件。中間件(Middleware) 是一個(gè)函數(shù),它可以訪問請求對象(request object (req)), 響應(yīng)對象(response object (res)), 和 web 應(yīng)用中處于請求-響應(yīng)循環(huán)流程中的中間件,一般被命名為 next 的變量。"
}
4、index.html內(nèi)容
.content-box{
width: 400px;
}
#text{
padding: 0px 10px;
width: 400px;
height: 300px;
}
5、html結(jié)構(gòu)
<h3>這是一段不變的內(nèi)容這是一段不變的內(nèi)容這是一段不變的內(nèi)容</h3> <div class="content-box"> <textarea id="text">如果要讓用戶留在當(dāng)前頁面中,同時(shí)發(fā)出新的HTTP請求,就必須用JavaScript發(fā)送這個(gè)新請求,接收到數(shù)據(jù)后,再用JavaScript更新頁面,這樣一來,用戶就感覺自己仍然停留在當(dāng)前頁面,但是數(shù)據(jù)卻可以不斷地更新。</textarea> </div> <button id="btnchange">換一換</button>
6、原生ajax寫法
window.onload=function(){
function clickbtn(){
var request;
if(window.XMLHttpRequest){
request=new XMLHttpRequest(); // 新建XMLHttpRequest對象
}else{
request=new ActiveXObject('Microsoft.XMLHTTP'); //兼容ie
}
request.open('GET','/ajax/index',true);
request.onreadystatechange=function(){ // 狀態(tài)發(fā)生變化時(shí),函數(shù)被回調(diào)
if(request.readyState===4){ // 成功完成
if(request.status===200){
var text=request.responseText;//成功,通過responseText拿到響應(yīng)的文本
document.getElementById('text').value=text;
}else{
var err=fail(response.status);// 失敗,根據(jù)響應(yīng)碼判斷失敗原因
alert(err);
}
}else{
// HTTP請求還在繼續(xù)...
}
}
// 最后調(diào)用send()方法才真正發(fā)送請求
request.send();//POST請求需要把body部分以字符串或者FormData對象傳進(jìn)去
}
document.getElementById('btnchange').onclick=clickbtn;
}
或jquery寫法
$(document).ready(function(){
$('#btnchange').click(function(){
$.ajax({
type:"GET",
url:"/ajax/index",
datatype:"json",
success:function(data){
$('#text').val(data);
}
});
});
});

運(yùn)行之后在瀏覽器輸入localhost:3003即可瀏覽


以上這篇基于原生ajax與封裝的ajax使用方法(詳解)就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
ajax+springmvc實(shí)現(xiàn)C與View之間的數(shù)據(jù)交流方法
下面小編就為大家?guī)硪黄猘jax+springmvc實(shí)現(xiàn)C與View之間的數(shù)據(jù)交流方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-03-03
Jquery $.ajax函數(shù)外的一段代碼的執(zhí)行順序
調(diào)用了JQuery的異步函數(shù)$.ajax ,然后在$.ajax函數(shù)外之后又有一段Jquery 代碼。每次都是在$.ajax之后的代碼先執(zhí)行2014-06-06
比getjson好的底層函數(shù)是哪個(gè)有什么優(yōu)點(diǎn)
比getjson好的底層函數(shù)優(yōu)點(diǎn)在于如果網(wǎng)絡(luò)出問題了,可以通過error方法來告訴用戶出錯(cuò),需要的朋友可以參考下2014-02-02
Ajax商品分類三級(jí)聯(lián)動(dòng)的簡單實(shí)現(xiàn)(案例)
下面小編就為大家?guī)硪黄狝jax商品分類三級(jí)聯(lián)動(dòng)的簡單實(shí)現(xiàn)(案例)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-08
解決ajax返回驗(yàn)證的時(shí)候總是彈出error錯(cuò)誤的方法
這篇文章主要介紹了解決ajax返回驗(yàn)證的時(shí)候總是彈出error錯(cuò)誤的方法,感興趣的小伙伴們可以參考一下2016-01-01
在實(shí)戰(zhàn)中可能碰到的幾種ajax請求方法詳解
這篇文章主要給大家分享了在實(shí)戰(zhàn)中可能碰到的幾種ajax請求方法,文中通過示例代碼介紹的非常詳細(xì),對大家具有一定的參考價(jià)值,需要的朋友們下面來一起看看吧。2017-03-03
按鈕的Ajax請求時(shí)一次點(diǎn)擊兩次提交的解決方法
像ajax請求發(fā)生兩次提交的原因是在執(zhí)行完ajax請求后,并沒有阻止submit的行為,下面小編給大家?guī)韮煞N按鈕的ajax請求時(shí)一次點(diǎn)擊兩次提交的解決方法,一起看看吧2016-09-09
利用AjaxSubmit()方法實(shí)現(xiàn)Form提交表單后回調(diào)功能
ajaxSubmit()方法是JQuery Form表單插件中的方法,使用時(shí),需要在jsp或者h(yuǎn)tml頁面上,引入JQuery庫和Form插件。接下來通過本文給大家分享通過AjaxSubmit()方法實(shí)現(xiàn)Form提交表單后回調(diào)功能,感興趣的朋友跟隨腳本之家小編一起看看吧2018-05-05
關(guān)于Ajax中通過response在后臺(tái)傳遞數(shù)據(jù)問題
這篇文章給大家介紹了Ajax中通過response在后臺(tái)傳遞數(shù)據(jù)問題,需要的的朋友參考下吧2017-08-08

