Ajax 예제 코드의 Node.js 구현-JS 튜토리얼-php.cn

Ajax 예제 코드의 Node.js 구현

小云云

풀어 주다： 2018-03-02 13:24:20

원래의

2032명이 탐색했습니다.

이 글은 주로 js에서 Ajax를 구현하는 예제 코드를 공유합니다. 도움이 되길 바랍니다.

Ajax 구현의 핵심 단계:
2. 링크 열기
4. DOM 렌더링

1.

XMLHttpRequest 객체는 Ajax의 기본 기능이며 클라이언트와 서버 간의 데이터 교환을 실현하기 위해 백그라운드에서 사용됩니다.

So:

"
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>
"

로그인 후 복사

관련 권장 사항:

Ajax 비동기 요청을 구현하는 JavaScript의 자세한 예

Ajax 비동기 요청을 구현하는 기본 JavaScript

사용자 이름의 고유성을 확인하기 위해 Ajax를 구현하는 jQuery

위 내용은 Ajax 예제 코드의 Node.js 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!