ajax详解

来源：互联网发布：windows sleep 头文件编辑：程序博客网时间：2024/06/15 21:59

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

Ajax的核心是XMLHttpRequest对象，它是Ajax实现的关键---发送异步请求，接收响应以及执行回调都是通过它来完成的。

2.传统JavaScript实现ajax的例子

如何获取XMLHttpRequest对象?

var xmlHttpReq=null;if(window.ActiveObject){xmlHttpReq=new ActiveXObject("Microsoft.XMLHTTP");//为了支持IE5和IE6}else if(window.XMLHttpRequest){xmlHttpReq=new XMLHttpRequest();//其他浏览器}

实例化成功后，使用open()方法初始化XMLHttpRequest对象，指定HTTP方法和要使用的服务器的URL。

post方式：XMLHttpReq.open("post","com.servlet/Login_servlet?username="+username,true);//true:因为是异步进行的，所以显示的将async参数设为trueget方式：XMLHttpReq.open("GET","text.php",true);

当XMLHttpRequest对象的readyState值改变时会激发一个readystatechange事件

XMLHttpReq.onreadystatechange=function(){if(XMLHttpReq.readyState==4)//请求完成加载{  if(XMLHttpReq.status==200）{    var server_value=XMLHttpReq.responseText;    if(server_value=="no_user"){       document.getElementById("message").innerHTML="无此用户名！";                          }                   }     }  };

使用send()方法发送该请求

XMLHttpReq.send();

3.JQuery实现ajax

（1）load()

load(url [,data] [,callback])url:请求的html页面地址，data:发送到服务器的key/value数据,callback：回调函数。如下：加载test.html数据到id为Test下：$(function(){$("#send").click(function(){      $("#Test").load("test.html");});});以下默认post请求：$("#Test").load("test.html",{name:"test",age:"20"},function(responseTest,testStatus,XMLHttpRequest){//responseText请求返回的内容//textStatus:请求状态：success,error,notmodified,timeout//XMLHttpRequest:XMLHttpRequest对象       });load()方法有参数传递时是post请求，没有则为get请求。无论ajax请求是否成功都会调用回调函数。

(2)$.get()

使用get方式进行异步请求。

$.get(url [,data] [,callback] [,type])type:服务器端返回内容格式

callback(data,textStatus)data:返回的数据

(3)$.post()

$.post() 方法通过 HTTP POST 请求从服务器上请求数据。

$("button").click(function(){  $.post("demo_test_post.asp",  {    name:"Donald Duck",    city:"Duckburg"  },  function(data,status){    alert("Data: " + data + "\nStatus: " + status);  });});

（4）$.ajax()

$.ajax({});

ajax()常用参数

注：url为必选其它非必选

url：发送请求地址，类型String

type：请求方式，类型String，

timeout：设置请求超时时间，类型Number

data：发送到服务器的数据。

dataType：预期服务器返回类型，如xml，html,json,text,script。类型为String

complete：请求完成后调用的回调函数，失败成功都调用，类型Function

success：请求成功调用的回调函数，类型Function.

error：请求失败调用的回调函数，类型Function.

例子如下：

<script type="text/javascript">    $(function(){        //按钮单击时执行        $("#testAjax").click(function(){                            //Ajax调用处理            $.ajax({               type: "POST",               url: "test.php",               data: "name=garfield&age=18",               success: function(data){                        $("#myDiv").html('<h2>'+data+'</h2>');                  }            });                     });    });</script>

0 0