Maison > interface Web > js tutoriel > Comment utiliser l'ajax natif et l'ajax encapsulé (avec code)

Comment utiliser l'ajax natif et l'ajax encapsulé (avec code)

php中世界最好的语言
Libérer: 2018-03-31 11:47:49
original
1982 Les gens l'ont consulté

Cette fois, je vais vous expliquer comment utiliser l'ajax natif et l'ajax encapsulé (avec code). Quelles sont les précautions lors de l'utilisation de l'ajax natif et de l'ajax encapsulé. Voici des cas pratiques. .

Lorsque nous ne savons pas comment écrire une interface backend pour tester ajax, nous pouvons utiliser l'environnement de nœud pour simuler une interface backend.

1. Pour simuler l'interface backend, vous pouvez vous référer au petit exemple de développement de site Web. Ouvrez la fenêtre de commande et accédez au dossier du projet et entrez npm install express dans. la ligne de commande. --save, installez expressmiddleware.

2. Remplacez le contenu de app.js par


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能够识别后缀为'.html'的文件 or app.engine("html",require("ejs").renderFile);
app.set('view engine','html');//在调用render函数时能自动为我们加上'.html' 后缀。如果没有第二句,我们就得把res.render(‘users')写成res.render(‘users.html'),否则会报错
 
var service=require('./webService/service.js');
 
app.use('/public',express.static('public'));
 
app.get('/',function(req,res){ //路由HTTP GET请求到有特殊回调的特殊路径。
 res.render('index');
});
 
app.get('/ajax/index',function(req,res){ //创建了一个模拟后端接口
 res.send(service.get_index_data());
});
 
/*若路径找不到,都返回404报错页面*/
app.use(function(req,res,next){
 var err=new Error('this page Not found');
 err.status=404;
 next(err);
});
 
app.listen(3003); //在浏览器输入localhost:3003即可浏览
Copier après la connexion


3. contenu index.json


{
 "items":"Express 是一个自身功能极简,完全是由路由和中间件构成一个的 web 开发框架:从本质上来说,一个 Express 应用就是在调用各种中间件。中间件(Middleware) 是一个函数,它可以访问请求对象(request object (req)), 响应对象(response object (res)), 和 web 应用中处于请求-响应循环流程中的中间件,一般被命名为 next 的变量。"
} 
Copier après la connexion


4. contenu index.html


.content-box{
 width: 400px;
}
#text{
 padding: 0px 10px;
 width: 400px;
 height: 300px;
}
Copier après la connexion


5. Structure HTML


<h3>这是一段不变的内容这是一段不变的内容这是一段不变的内容</h3>
<p class="content-box">
 <textarea id="text">如果要让用户留在当前页面中,同时发出新的HTTP请求,就必须用JavaScript发送这个新请求,接收到数据后,再用JavaScript更新页面,这样一来,用户就感觉自己仍然停留在当前页面,但是数据却可以不断地更新。</textarea>
</p>
<button id="btnchange">换一换</button>
Copier après la connexion


6. Méthode d'écriture ajax native


window.onload=function(){
 function clickbtn(){
  var request;
  if(window.XMLHttpRequest){
   request=new XMLHttpRequest(); // 新建XMLHttpRequest对象
  }else{
   request=new ActiveXObject(&#39;Microsoft.XMLHTTP&#39;); //兼容ie
  }
  request.open(&#39;GET&#39;,&#39;/ajax/index&#39;,true);
  request.onreadystatechange=function(){ // 状态发生变化时,函数被回调
   if(request.readyState===4){ // 成功完成
    if(request.status===200){
     var text=request.responseText;//成功,通过responseText拿到响应的文本
     document.getElementById(&#39;text&#39;).value=text;
    }else{
     var err=fail(response.status);// 失败,根据响应码判断失败原因
     alert(err);
    }
   }else{
    // HTTP请求还在继续...
   }
  }
  // 最后调用send()方法才真正发送请求
  request.send();//POST请求需要把body部分以字符串或者FormData对象传进去
 }
 document.getElementById(&#39;btnchange&#39;).onclick=clickbtn;
}
Copier après la connexion


ou écriture en jquery


$(document).ready(function(){
 $(&#39;#btnchange&#39;).click(function(){
  $.ajax({
   type:"GET",
   url:"/ajax/index",
   datatype:"json",
   success:function(data){
    $(&#39;#text&#39;).val(data);
   }
  });
 });
});
Copier après la connexion



运行之后在浏览器输入localhost:3003即可浏览
Copier après la connexion


Je crois que vous maîtrisez la méthode après avoir lu le cas dans cet article, Pour un contenu plus passionnant, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Méthode Ajax pour implémenter la soumission du formulaire Form

Explication détaillée des connaissances de base des messages HTTP et d'Ajax

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal