Maison > Article > interface Web > js implémentation de l'exemple de code Ajax

js implémentation de l'exemple de code Ajax

小云云original: 2018-03-02 13:24:202027parcourir

Cet article partage principalement avec vous l'exemple de code d'implémentation d'Ajax en js, dans l'espoir d'aider tout le monde.

Les étapes principales pour implémenter Ajax :
1. Définir l'objet ;
Ouvrir le lien ;
4. 🎜>

5. Effectuer le rendu DOM

1. Pourquoi devons-nous définir des objets ?

L'objet XMLHttpRequest est la base d'Ajax. Sa fonction est à utiliser en arrière-plan pour réaliser l'échange de données entre le client et le serveur.

Donc :

Recommandations associées :

"
var xhr;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject(&#39;Micorsoft.XMLHTTP&#39;);
                //在IE5和IE6中只有 ActiveXObject(&#39;Micorsoft.XMLHTTP&#39;) 能够实现数据交互
}
"
"
<body>
<ul id="showCon">
</ul>
<script type="text/javascript">
var oU = document.getElementById("showCon");
//1.创建对象
var xhr;
//做兼容
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{  //IE5 IE6
xhr = new ActiveXObject(&#39;Microsoft.XMLHTTP&#39;);
}
//
console.log(xhr.readyState);//0
//2.打开连接
xhr.open("GET","http://datainfo.duapp.com/shopdata/getclass.php");
//
console.log(xhr.readyState);//1
//3.发送请求（数据）
xhr.send();
//4.获取到数据，渲染页面
xhr.onreadystatechange = function(){
//
console.log(xhr.readyState);
if(xhr.readyState == 4 && xhr.status == 200){
//
console.log(xhr.responseText);
var t = xhr.responseText;
//get方法获取的是:字符串.我们需要将其转换成JSON数据进行操作
var data1 = JSON.parse(t); 
//字符串====>json数据!!!!!!!!!!
                                        //json====>字符串
JSON.stringify(data1)
for(var i = 0;i < data1.length;i++){  //因为这里获得的是一个数组，所以首选的是for循环
var oLi = document.createElement("li"); 
oLi.textContent = data1[i].className; 
//每一个对象下面的className值====>创建的每一个li元素
oU.appendChild(oLi);
}
//
注意点:
//
1.字符串===>json
//
2.获取每一个对象里的className的值
//
|--第一步:想到利用for循环得到data1中的每一个元素
//
|--第二步:因为ul中,没有li元素,所以需要进行DOM元素创建;(其实这里可以直接想到:既然创建,必定要进行"添加")
//
|--第三步:把转换之后的   对象[i].className ====> 对应创建的li
//
|--第四步:把赋过值得li追加到ul中
}
}
</script>
</body>
"

Implémentation JavaScript d'exemples de requêtes asynchrones Ajax

JavaScript natif implémente la requête asynchrone Ajax

jQuery implémente Ajax pour vérifier l'unicité du nom d'utilisateur

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!

JavaScript jquery ajax JS 对象 dom 异步

Déclaration：

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

Article précédent：Introduction à l'utilisation d'une page d'actualisation de lien et d'une page d'actualisation jsArticle suivant：Introduction à l'utilisation d'une page d'actualisation de lien et d'une page d'actualisation js

Articles Liés

Voir plus