ajax的简单应用

什么是 AJAX ？

AJAX = 异步 JavaScript 和 XML。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

js中使用方式

1.创建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");
  }

2.发送请求

xmlhttp.open("GET","demo_get.asp",true);  三个参数 为 提交方法，url，异步   ajax中应设置为true
xmlhttp.send();

3.编写响应方式

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();

每当 readyState 改变时，就会触发 onreadystatechange 事件。

readyState 属性存有 XMLHttpRequest 的状态信息。

下面是 XMLHttpRequest 对象的三个重要的属性：

属性 描述

onreadystatechange	存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState	存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪
status	200: "OK" 404: 未找到页面

jquery中应用  ajax最流行的是和jquery结合使用  jquery相当于把我们刚看到的过程封装起来，使用更简单

1.$(selector).load(URL,data,callback);  可以一个参数或多个参数 data是传输数据  callback是返回调用方法 相当于onreadystatechange

 

可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数：

• responseTxt - 包含调用成功时的结果内容
• statusTXT - 包含调用的状态
• xhr - 包含 XMLHttpRequest 对象

$("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
    if(statusTxt=="success")
      alert("外部内容加载成功！");
    if(statusTxt=="error")
      alert("Error: "+xhr.status+": "+xhr.statusText);
  });

 2jquery.ajax() 常用，里面可以放很多参数，具体参见文档

例子$.ajax({

type : "POST",

url : "xxxxxxx?diagId="+diagnosisId,

dataType : "json",

success : function(data) {

var txt = "";

 

for (var i = 0; i < data["obj"].length; i++) {

txt += "<li>" + data["obj"][i]["name"] + "</li>"

}

$(".chufang_anli").append(txt);

}

})

3.$("form").serializeArray() $("form").serialize()序列化表单

还有一些其他方法可参见  jquery  ajax

http://www.w3school.com.cn/jquery/jquery_ref_ajax.asp