AjaxAjax

AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。

AJAX 不是新的编程语言,而是同样栽使现有标准的初点子。

AJAX
是在无还加载整个页面的状态下,与服务器交换数据并创新部分网页的法门。

一. XMLHttpRequest对象 —–AJAX
的基础。

XMLHttpRequest
用于在后台和服务器交换数据。这意味着可以以未还加载整个网页的图景下,对网页的之一有些进行更新。

创建 XMLHttpRequest 对象

代码:

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");
  }

AJAX – 服务器请求 

.open(method,url,async

  • method:请求的门类;GET 或 POST
  • url:文件在服务器上的岗位(可以是绝地址或者相对于文件的相对地址);
    该公文可以是另外类型的文书,比如 .txt 和
    .xml,或者服务器脚本文件,比如 .asp 和 .php
    (在流传响应之前,能够以服务器上实行任务)。
  • async:true(异步)或 false(同步)

 .send(string)

string:仅用于post请求,当也get请求时,设置为空。

 简单的例子:

xmlhttp.open("GET","demo_get.asp",true);
xmlhttp.send();

xmlhttp.open("POST","demo_post.asp",true);
xmlhttp.send();

xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
 //使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据:
//setRequestHeader(header,value) 
//header: 规定头的名称
//value: 规定头的值

xmlhttp.send("fname=Bill&lname=Gates");

AJAX – 服务器响应

使用取来自服务器的响应,请以 XMLHttpRequest 对象的 responseText 或
responseXML 属性。

属性 描述
responseText 获得字符串形式的响应数据。
responseXML 获得 XML 形式的响应数据。

 

responseText 属性:如果来服务器的应并非 XML,请以 responseText 属性。

 

responseText 属性Ajax返回字符串形式之应,因此得以这样以:

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

responseXML 属性:如果来服务器的响应是 XML,而且用作为 XML 对象开展辨析,请动 responseXML 属性:

请求 books.xml 文件,并分析响应:

 

xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
  {
  txt=txt + x[i].childNodes[0].nodeValue + "<br />";
  }
document.getElementById("myDiv").innerHTML=txt;

 

AJAX – onreadystatechange 事件

属性 描述
onreadystatechange 存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。
readyState

存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

  • 0: 请求未初始化,open还没有调用
  • 1: 服务器连接已建立,open已经调用了
  • 2: 请求已接收,也就是接收到头信息了
  • 3: 请求处理中,也就是接收到响应主体了
  • 4: 请求已完成,且响应已就绪,也就是响应完成了
status

200: "OK"

404: 未找到页面

于 onreadystatechange
事件被,我们确定当服务器响应已做好吃拍卖的备时所推行之天职。

当 readyState 等于 4 且状态吧 200 时,表示应已稳:

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

总,建立一个Ajax请求:

Ajax 1

相关文章