Ajax学习笔记_01

Posted jonathanc

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Ajax学习笔记_01相关的知识，希望对你有一定的参考价值。

  • Ajax是一种方法，而不是一种编程语言。语言的话，用js就足够了。
  • 首先需要创建一个XMLHttpRequest对象，这个对象的方法包括：
  1. abort();
  2. getAllResponseHeaders()
  3. getResponseHeader（‘header’）
  4. open(‘method‘，“url”);
  5. send(content)
  6. setRequestHeader("header"，“value”)
  • 所有这些方法中，用的比较多的是open和send.
  • 除此之外，XMLHttpRequest对象还有很多属性，包括：
  1. onreadystatechange
  2. readyState
  3. responseText
  4. responseXML
  5. status
  6. statusText
  • 在使用XMLHttpRequest对象之前，需要判断一下浏览器的类型，通过判断是否支持ActiveX控件，是的话，则是IE浏览器，否的话，直接本地实例化一个对象。
1         var xmlHttp;
2         function createXMLHttpRequest(){
3             if(window.ActiveXObject){
4                 xmlHttp=new ActiveXObject(‘Microsoft.xmlHttp‘)
5             }
6             else if (window.XMLHttpRequest){
7                 xmlHttp=new XMLHttpRequest();
8             }
9         }

 

  • 　下面是一个小的展示，关于ajax的异步如何实现的
 1 <!DOCTYPE html>
 2 <html xmlns="http：//www.w3.org/1999/xhtmL">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Ajax_01</title>
 6     <script type="text/javascript">
 7         var xmlHttp;
 8         function createXMLHttpRequest(){
 9             if(window.ActiveXObject){
10                 xmlHttp=new ActiveXObject(‘Microsoft.xmlHttp‘)
11             }
12             else if (window.XMLHttpRequest){
13                 xmlHttp=new XMLHttpRequest();
14             }
15         }
16         function startRequest(){
17             createXMLHttpRequest();//创建XMLHttpRequest对象
18             xmlHttp.onreadystatechange=handleStateChange;//onreadystatechange表示每次该对象的状态变化的时候，都会调用handleStateChange函数。
19             xmlHttp.open(‘GET‘,"simpResponse.xml",true);//调用simpResponse.xml文档，
20             xmlHttp.send(null);//不给服务器发送信息
21         }
22         function handleStateChange(){
23             if(xmlHttp.readyState==4){//（完成）响应内容解析完成，可以在客户端调用了
24                 if(xmlHttp.status==200){//http的状态码为200时，表示正常交互完成
25                     alert("the server replied with:"+xmlHttp.responseText);//弹出消息框，调用出xmlHttp对象的的文档内容
26                 }
27             }
28         }
29     </script>
30 </head>
31 <body>
32     <form action="=#">
33         <input type="button" value="PRESS" onclick="startRequest()">
34     </form>
35 </body>
36 </html>

　　比如说，我的目的是通过点击button来调用startRequest（）函数。那么在这个函数里面，可以看到每一步的注释。

 

以上是关于Ajax学习笔记_01的主要内容，如果未能解决你的问题，请参考以下文章

vuejs学习笔记--属性，事件绑定，ajax

AJAX 学习笔记 2017_05_04

vuejs学习笔记--属性，事件绑定，ajax

vuejs学习笔记--属性，事件绑定，ajax

ReactJs学习笔记01

AJAX快速学习笔记