AJAX

一、GET请求

基本模板

function loadXMLDoc(){
  var xmlhttp;
  if (window.XMLHttpRequest){
     // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
  }else {
    // code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function() {
  if (xmlhttp.readyState==4 && xmlhttp.status==200){
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET","/ajax/demo_get.asp",true);
  xmlhttp.send();
}

1)简单请求

一个简单的请求

2)带ID的请求

在上面的请求中,您可能得到的是缓存的结果。为了避免这种情况,请向 URL 添加一个唯一的 ID|

3)带信息的请求
通过 GET 方法发送信息,请向 URL 添加信息|

二、POST

1)简单请求|简单请求|

2)带信息得请求|如果需要像 HTML 表单那样 POST 数据,请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据|

三、url 和 async

1)url

url - 服务器上的文件
open() 方法的 url 参数是服务器上文件的地址:

xmlhttp.open("GET","ajax_test.asp",true);

该文件可以是任何类型的文件,比如 .txt 和 .xml,或者服务器脚本文件,比如 .asp 和 .php (在传回响应之前,能够在服务器上执行任务)。

2)async

异步 - True 或 False?
AJAX 指的是异步 JavaScript 和 XML(Asynchronous JavaScript and XML)。
对于 web 开发人员来说,发送异步请求是一个巨大的进步。很多在服务器执行的任务都相当费时。AJAX 出现之前,这可能会引起应用程序挂起或停止。

通过 AJAX,JavaScript 无需等待服务器的响应,而是:
①在等待服务器响应时执行其他脚本
②当响应就绪后对响应进行处理
Async = true

xmlhttp.open("GET","test1.txt",true);

Async = true

xmlhttp.open("GET","test1.txt",false);

我们不推荐使用 async=false,但是对于一些小型的请求,也是可以的。
请记住,JavaScript 会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢,应用程序会挂起或停止。
注释:当您使用 async=false 时,请不要编写 onreadystatechange 函数 - 把代码放到 send() 语句后面即可:

xmlhttp.open("GET","test1.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

四、服务器响应

如需获得来自服务器的响应,请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

属性 描述
responseText 获得字符串形式的响应数据。
responseXML 获得 XML 形式的响应数据。
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i";
}
document.getElementById("myDiv").innerHTML=txt;

五、onreadystatechange
AJAX_第1张图片

你可能感兴趣的:(AJAX)