基于本地ajax和封装的ajax用法(详细说明)

当我们不能编写后端接口来测试ajax时，我们可以使用节点环境来模拟一个后端接口。

1.模拟后端界面，请参考整个网站开发的小例子，打开命令窗口，转到项目文件夹后，在命令行中输入npm install express - save，安装express中间件。

2.将app.js的内容替换为

var express=require(' express ')；//var path=require(' path ')；var app=express()；//app.set('view '，path.join(__dirname，' view '))；//搜索所有模板app.engine ('html '，require ('ejs ')。_ _ express );//让ejs识别文件orapp.engine ('html '，require ('ejs ')。带后缀'的renderfile)。html '；app.set('视图引擎'，' html ')；//可以自动添加’。调用render函数时给我们的“html”后缀。没有第二句话，我们必须将res.render('users ')写成res.render ('users.html ')，否则我们将报告错误varservice=require('。/web service/service . js ')；app.use('/public '，express . static(' public '))；Get ('/'，function (req，RES){//通过特殊的回调将HTTP GET请求路由到特殊的路径。RES . render(' index ')；});app.get ('/Ajax/index '，函数(req，RES){//创建一个模拟后端接口RES . send(service . get _ index _ data())；});/*如果找不到路径，返回404错误报告页面*/app.use (function (req，res，next) {var err=new error('此页面未找到')；err.status=404下一个(err)；});app . listen(3003)；//在浏览器中输入localhost:3003浏览3。index.json内容

{'items':'Express是一个功能最少，完全由路由和中间件组成的web开发框架：本质上，一个Express应用在调用各种中间件。中间件是一个函数，可以访问web应用的请求-响应循环过程中的请求对象(req)、响应对象(res)和中间件，一般称为next的变量。} 4.index.html的内容。内容盒{ width: 400px} # text { padding: 0px 10px宽度： 400 px；height: 300px}5.html结构

H3这是一个不变的内容这是一个不变的内容/h3div class=' content-box ' textareaid=' text '如果你想让用户停留在当前页面，同时发送一个新的HTTP请求，你必须用JavaScript发送这个新的请求，然后在收到数据后用JavaScript更新页面，这样用户会觉得他还停留在当前页面，但是数据可以保留。/text area/div button id=' BTN change ' change/button 6，本机ajax编写

window . onload=function(){ function click BTN(){ var request；if(窗口。XMLHttpRequest){ request=new XMLHttpRequest()；//创建新的XMLHttpRequest对象} else { request=new ActiveX object(' Microsoft . XMlhttp ')；//兼容ie} request.open ('get '，'/Ajax/index '，true)；请求。onreadystatechange=function(){//当状态改变时，如果(request。ready state==4){//成功完成if(请求。status==200) {vartext=request。responsetext//成功，获取responseText document . getelementbyid(' text ')。value=通过responsetext的文本；} else { var err=fail(response . status)；//失败，根据响应码判断失败原因告警(err)；} } else {//HTTP请求仍在进行中.} }//请求request.send()是最后通过调用send()方法真正发送的；//POST请求需要将正文部分作为字符串或FormData object } document . getelementbyid(' BTN change ')传递。onclick=clickbtn}或jquery

$(文档)。ready(function(){ $('#btnchange '))。单击(function(){ $)。ajax({ type:'GET '，url:'/ajax/index '，datatype:'json '，success : function(data){ $(' # text ')。val(数据)；} });});});

运行后，在浏览器中输入localhost:3003进行浏览

以上基于原生ajax和封装的ajax使用方法(详细说明)是边肖分享的全部内容，希望能给大家一个参考和支持。