javascript中AJAX的使用

分手后的思念是犯贱 2022-05-15 11:39 225阅读 0赞

首次使用博客，记录一些自己感兴趣的东西。  
参考文章地址：[http://www.w3school.com.cn/ajax/ajax\_xmlhttprequest\_create.asp][http_www.w3school.com.cn_ajax_ajax_xmlhttprequest_create.asp]  
AJAX使用的方法：  
1、创建XMLHttpReques对象  
浏览器使用XMLHttpRequest对象与服务器进行交互，获取数据。一般现下流行的浏览器均支持XMLHttpRequest对象（IE5 和 IE6 使用 ActiveXObject）。  
语法：  
var xmlHttp=new XMLHttpRequest();  
老版本的IE浏览器的创建方式为：  
var xmlHttp=new ActiveXObject(“Microsoft.XMLHTTP”);  
因此在使用该对象时应该首先判断浏览支持何种对象再行创建：

var xmlhttp;
    if (window.XMLHttpRequest)
      {
      xmlhttp=new XMLHttpRequest();
      }
    else
      {
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }

2、向服务器发送请求  
使用XMLHttpRequest对象的open()与send()方法向服务器发送请求  
open(method,url,async)  
实例：

xmlHttp.open("get","index.jsp",true)

method表示请求的方式，get或者post  
url表示请求的地址  
async是一个boolean类型，表示是否异步  
send(String)  
当请求方式为post时，String不能为空，表示向服务器提交的数据  
3、获取响应  
如果需要获取服务器的响应从而更改视图内容，可以使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。  
前者表示获取字符串形式的响应内容，后者表示获取XML形式的响应内容。  
实例（使用XMLHttpRequest的响应内容更改html)：

document.getElementById("myDiv").innerHtml=xmlHttp.responseText;

4、onreadystatechange事件  
当向服务器发送请求时redyState的值发生改变时触发onreadystatechange事件。

readyState存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。  
0: 请求未初始化  
1: 服务器连接已建立  
2: 请求已接收  
3: 请求处理中  
4: 请求已完成，且响应已就绪

status有两种数值，分别表示：  
200: “OK”  
404: 未找到页面  
实例：

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

[http_www.w3school.com.cn_ajax_ajax_xmlhttprequest_create.asp]: http://www.w3school.com.cn/ajax/ajax_xmlhttprequest_create.asp