ajax初来咋到

来源：互联网发布：易观的数据来源编辑：程序博客网时间：2024/06/05 02:10

ajax最让人注意自然的词是“异步的”，但ajax这个词只是个花俏的说法而已。

有的老外叫即时通信，其实意思也是局部刷新。即A——》B，B——》C，用了ajax可以A——》B同时A——》C了。

function createRequest () {varxhr = new XMLHttpRequest();return xhr;}

定义一个函数createRequest，new XMLHttpRequest只是一切工作的开始。但万恶的IE低版本浏览器却的不到支持：( 所以便有了增强版的createRequest函数。

function createRequest () {var xhr = false;if (window.XMLHttpRequest) {xhr = new XMLHttpRequest();}else if (window.ActionXObject) {xhr = new ActiveXObject("Microsoft.XMLHTTP");}return xhr;}

所以return出的值答案只有三种可能，即false，new XMLHttpRuest()，new ActiveXObject("Microsoft.XMLHTTP")。当然为了程序更加完善，你应该try catch一下。

unction getBackInfo(file){var ruquest = createRequest();if (request) {request.onreadystatechange = somethings;request.open("GET",file,true);request.send(null);}}

又定义一个函数getBackInfo，它传了一个参数file，作用是传哪个文件的值。我们可以看出XMLHttpRuest有三个属性onreadystatechange,open,send

open里的GET是跟send(null)相关联的。具体能力有限，可以参考有关书籍。

request.onreadystatechange = somethings;

somethings我们可以定义个匿名函数，再传个参数request过去。

function getBackInfo(file){var ruquest = createRequest();if (request) {request.onreadystatechange = function(){displayRequest(request);};request.open("GET",file,true);request.send(null);}}

displayRequest函数就是具体处理的函数，什么发送请求，处理请求对错，请求格式，请求内容都在那儿：)

function displayRequest(request){if (request.readyState == 4) {if (request.status == 200 || request.status == 304 ) {//do}else{alert("error");}}}

里面出现的4啊，200,304是什么呀，一句话，多看书。

我们看到当通过俩层把关后，这时用request.responseText应该可以搜出你想要的答案了。

这里面有又分用什么格式传输数据的，有xml格式，json格式，html格式。

具体如下：（json）

function displayRequest(request) {  if (request.readyState == 4) {    if (request.status == 200 || request.status == 304) {      var data = eval('('+request.responseText+')');      var name = data.person.name;      var email = data.person.email;      var website = data.person.website;      var gong = "<<<<<Name>>>>>"+name +"<<<<<Website:>>>>>"+ website +"<<<<<Email:>>>>>"+ email;      var details = document.getElementById("details");      details.firstChild.nodeValue = gong;    }  }}

然后html页面就是：

<!DOCTYPE html><html>  <head>  <meta charset="utf-8" />  <title>People at Clearleft</title>  <style type="text/css">  @import url("clearleft.css");  </style>  <script type="text/javascript" src="fetchjson.js"></script></head><body>  <h1>People</h1>  <ul id="titLinks">    <li>      <a href="files/andy.js">Andy</a>    </li>    <li>      <a href="files/richard.js">Richard</a>    </li>    <li>      <a href="files/jeremy.js">Jeremy</a>    </li>  </ul>  <div id="details"> </div></body></html>

加上html与js交互函数

function clickLinks(){  var links = document.getElementById("titLinks").getElementsByTagName("a");  for(var i = 0; i<links.length;i++){    links[i].onclick = function(){       //alert("dddddddddddd");      grabFile(this.href);      return false;    }  }}

最后来个调用函数

  //auto addLoadEvent  function addLoadEvent(func){    var oldonload = window.onload;    if (typeof window.onload != 'function') {      window.onload = func;      //第一次则执行，多次则else      //console.log(func);    }else{      window.onload = function(){        oldonload();        func();        //console.log(func);      }    };  }  addLoadEvent(clickLinks);

这就是我这一天的内容，今天终于看懂了些了，这些只是一些凌乱的笔记，望各位读者能自己参与实践。

0 0