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",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);
这就是我这一天的内容,今天终于看懂了些了,这些只是一些凌乱的笔记,望各位读者能自己参与实践。