Ajax

一.普通版

 <script type="text/javascript">

  window.onload=function(){

  

  document.getElementsByTagName('a')[0].onclick=function(){

  //1. 获取a节点,并为其添加onclick响应函数

  //2. 取消a节点的默认行为;

  //3. 创建XMLHttpRequest对象

  //4. 准备发送请求的数据: url;

  //5. 调用XMLHttpRequest 对象的 open 方法,

  //6. 调用 XMLHttpRequest 对象send 方法

  //7. 为XMLHttpRequest 对象的readyState 响应函数

  //8. 判读响应是否完成 : XMLHttpRequest 对象的readyState 属性值为4的时候

  //9. 再判断响应是否可用: XMLHttprequest 对象的statues属性值为200

  //10. 打印响应的结果: requestText

  

  return false;

  }

  }

  </script>

 <script type="text/javascript">

  window.onload=function(){

  

  //1. 获取a节点,并为其添加onclick响应函数

  document.getElementsByTagName('a')[0].onclick=function(){

  //3. 创建XMLHttpRequest对象

  var request = new XMHttpRequest();

  //4. 准备发送请求的数据: url;

  var url=this.href;

  var method = "GET";

  //5. 调用XMLHttpRequest 对象的 open 方法,

  request.open(method,url);

  //6. 调用 XMLHttpRequest 对象send 方法

  request.send(null);

  //7. 为XMLHttpRequest 对象的readyState 响应函数

  request.onreadystatechange = function(){

  //8. 判读响应是否完成 : XMLHttpRequest 对象的readyState 属性值为4的时候

  if (request.readyState == 4){

  //9. 再判断响应是否可用: XMLHttprequest 对象的statues属性值为200

   if (request.status == 200 || request.status == 304){

  //10. 打印响应的结果: requestText

   alert(request.responseTest);

   }

  }

  }

  //2. 取消a节点的默认行为;

  return false;

}}

二.

1.使用xml格式来传输数据(responseText部分)

  varname = result.getElementsByTagName("name")[0].firstChild.nodeValue;

var website =result.getElementsByTagName("website")[0].firstChild.nodeValue;

  var email = result.getElementsByTagName("email")[0].firstChild.nodeValue;

  

  //拼写html语句

  //<h2><a href="">andy</a></h2>

  var aNode = document.createElement("a");

  aNode.appendChild(document.creatTextNode|(name));

  aNode.href=email;

  

  var h2Node = document.createElement('h2');

  h2Node.appendChild(aNode);

2.使用json来传输数据

 var jsonObject = {

  "name":"at",

  "age":12;

  "address":{"city":"guangzhou","school":"guangda"}

  "teaching":function(){

  alert("shenmegui");

  }

  }

  //使用eval()方法可以使字符串转为本地js代码

  var testStr="alert('hello')";

  eval(testStr);

  //将json字符串转换为json对象,这样才能使用.

  var testObject = eval("("+jsonStr+")");

  alert(testObject.name);

 

三.使用jquery来加载ajax数据

1.load() 方法(只能用于html格式)

是 jQuery 中最为简单和常用的 Ajax 方法, 能载入远程的 HTML 代码并插入到 DOM 中. 它的结构是:   load(url[, data][,callback])

 

程序员只需要使用 jQuery 选择器为 HTML 片段指定目标位置, 然后将要加载的文件的 url 做为参数传递给 load() 方法即可

例子

$(function(){

 $("a").click(function(){

  //使用load方法处理ajax

  var url = this.href;//(这里可以选择需要的数据)如+” h2 a”(空格加html名)

  var args = {"time":newDate()};

  $("id或者class").load(url,args);

  return false;

 });

});

2.$.get() 方法$.post()(可以使用与多种格式的数据)(需要指定加载位置)

使用 GET 方式来进行异步请求. 它的结构是: $.get(url[, data][, callback][, type]);

 

 

 

 

 

 

$.get() 方法的回调函数只有两个参数: data 代表返回的内容, 可以是 XML 文档, JSON 文件, HTML 片段等; textstatus 代表请求状态, 其值可能为: succuss, error, notmodify, timeout 4 种.

$.get()  和 $.post() 方法时 jQuery 中的全局函数, 而 find() 等方法都是对 jQuery 对象进行操作的方法

例子:

1.数据为想xml格式

$(function)(){

 $("a").click(function(){

 var url = this.href;

 var args = {"time":newDate()};

 $.get(url,args,function(date){//(date为服务器发送过来的数据)

  var name=$(date).find("name").text();

  var email=$(date).find("email").text();

  var website=$(date).find("website").text();

     $("#details").empty()

                    .append("<h2><a href='"+email+"'>"+name+"</a></h2>");

            .append("<a href='"+website+"'>"+website+"</a>");

 

 });

 });

});

return false;

};

2.数据为json格式

$(function)(){

 $("a").click(function(){

 var url = this.href;

 var args = {"time":newDate()};

 $.get(url,args,function(date){//(date为服务器发送过来的数据)

var name = date.person.name;

var email = date.person.email;

var website = date.person.website;

      $("#details").empty()

                    .append("<h2><a href='"+email+"'>"+name+"</a></h2>");

            .append("<a href='"+website+"'>"+website+"</a>");

 });

 });

});

return false;

};