ajax初来咋到

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

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

function createRequest () {
	var	xhr = 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",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);

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

ajax初来咋到

相关文章