Ajax异步技术的实现

最新推荐文章于 2021-08-05 22:04:04 发布

爱涵雨

最新推荐文章于 2021-08-05 22:04:04 发布

阅读量97

点赞数

分类专栏： JavaScript 文章标签： Ajax XML 浏览器 IE Microsoft

JavaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1：创建异步调用对象：创建对象是与浏览器类型及浏览器的版本有关

var xmlhttp=new XMLHttpReqest();-- FireFox

var xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");--IE
2：加载异步数据所在的服务器：xmlhttp.open("POST"," http://www.baidu.com",true);

   3：异步调用服务器状态的变化：
     xmlhttp.readystate与服务器的五种交互状态(请求状态)：
    0: 未初始化异步对象创建完毕，未使用open方法
    1：初始化（正在加载）异步对象创建完毕，未使用send方法发送请求
    2：发送数据（已加载）完成Send方法，正等待服务器响应
      3：数据正传送（交互中）正在接受数据，但并未完成
     4：异步调用完成（完成）可以使用
      xmlhttp.status=响应服务器的HTTP状态码 200=OK   400=NOT FOUND
4:发出HTTP请求：xmlhttp.send();
   5:处理异步获取的数据:

获取的数据可以根据不同的类型进行保存在异步创建对象的中如下：

responseBody	将回应信息正文以unsigned byte数组形式返回.只读
responseStream	以Ado Stream对象的形式返回响应信息。只读
responseText	将响应信息作为字符串返回.只读
responseXML	将响应信息格式化为Xml Document对象并返回，只读

小例子

function createXMLHttpRequest()
{
if( window.ActiveXObject )
{
xmlHttp = new ActiveXObject( "Microsoft.XMLHTTP" );
}
else if( window.XMLHttpRequest )
{
xmlHttp = new XMLHttpRequest();
}
}

function send()
{
var url = "";
var xml = createXML();

url = "setting_storage_add.do?curDate=" + new Date().getTime();

createXMLHttpRequest();
xmlHttp.open( "post", url, true );
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.setRequestHeader( "Content-Type", requestHeader_urlencoded );
xmlHttp.send( xml );

}

unction createXML()
{
// create xml
var xml = "<?xml version=\"1.0\" encoding=\"gb2312\"?>";
xml += "<xml>"
xml += "<title><\/title>";

xml += "<datas>";
xml += "<data>"

  xml += "<storagenumber>" + storagenumber + "<\/storagenumber>";
xml += "<storagetypes>" + storagetypes + "<\/storagetypes>";
xml += "<storageaddress>" + storageaddress + "<\/storageaddress>";
xml += "<storagename>" + storagename + "<\/storagename>";
xml += "<storagedutyid>" + storagedutyid + "<\/storagedutyid>";
xml += "<storagenote>" + storagenote + "<\/storagenote>";

xml += "<\/data>";
xml += "<\/datas>";

xml += "<\/xml>";

return xml;
}
unction handleStateChange()
{
if( xmlHttp.readyState == 4 )
{
  if( xmlHttp.status == 200 )
  {
   callBack();
  }
}
}

function callBack()
{
document.location.href = xmlHttp.responseText;
}