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

猜你喜欢

转载自kelly-xiao.iteye.com/blog/2239756