Ajax 理解，使用，记录

来源：互联网发布：淘宝怎么打开链接编辑：程序博客网时间：2024/05/29 13:05

ajax== Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）

XMLHttpRequest 对象
创建xhr对象，

var xmlhttp;if (window.XMLHttpRequest){    //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码    xmlhttp=new XMLHttpRequest();}else{    // IE6, IE5 浏览器执行代码    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}

包括对 IE5 和 IE6的兼容。

2.XHR请求
XMLHttpRequest 对象的 open() 和 send() 方法：

xmlhttp.open("GET","ajax_info.txt",true);xmlhttp.send();

url：包括get(), post()
关于get和post的区别：与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
然而，在以下情况中，请使用 POST 请求：
无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

3.XHR响应
XMLHttpRequest 对象的 responseText 或 responseXML 属性。

实例

<!DOCTYPE html><html><head><meta charset="utf-8"><script>function loadXMLDoc(){    var xmlhttp;    if (window.XMLHttpRequest)    {        //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码        xmlhttp=new XMLHttpRequest();    }    else    {        // 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","/try/ajax/ajax_info.txt",true);    xmlhttp.send();}</script></head><body><div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div><button type="button" onclick="loadXMLDoc()">修改内容</button></body></html>

4.关于使用问题

ajax通常情况下用于同一域下

结果：

注：关于请求的文件，txt就是文本文件，html可以请求，php也可以，xml也行，jsp文件我试了，请求到了里面html的部分。

5.XHRreadystate

每当 readyState 改变时，就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。

实例：

xmlhttp.onreadystatechange=function()  {  if (xmlhttp.readyState==4 && xmlhttp.status==200)    {    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;    }  }

好，大概就是这些。

0 0