この記事では主に js で Ajax を実装するサンプルコードを紹介します。お役に立てれば幸いです。
Ajax を実装するための主要な手順:
2. リンクを開く。
5. オブジェクトを定義する。
XMLHttpRequest オブジェクトは Ajax の基礎であり、その機能はクライアントとサーバー間のデータ交換を実現するためにバックグラウンドで使用されます。
それで:
" var xhr; if(window.XMLHttpRequest){ xhr = new XMLHttpRequest(); }else{ xhr = new ActiveXObject('Micorsoft.XMLHTTP'); //在IE5和IE6中只有 ActiveXObject('Micorsoft.XMLHTTP') 能够实现数据交互 } " " <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('Microsoft.XMLHTTP'); } // 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> "
Ajax 非同期リクエストを実装する JavaScript の詳細な例
以上がAjaxサンプルコードのjs実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。