Ajax入门

什么是Ajax

Ajax是异步交互过程

1.局部刷新 2.按需取数据

无刷新读取数据。

Ajax能且仅能从服务器读取文件。

怎么写一个Ajax库:1。创建对象 2。请求 3。响应

一个简单的ajax库:

 

function ajax(url){
//1.创建Ajax对象
var oajax=new XMLHttpRequest();//XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
 
 //2.请求
 oajax.open('GET',url,true);//规定请求的类型以及url 和是否异步
 oajax.send();//将请求发送到服务器
 oajax.onreadystatechange=function(){
 	//当 readyState 等于 4 且状态为 200 时,表示响应已就绪
	if (oajax.readyState==4 && oajax.status==200) {
         document.getElementById('id').innerHTML=oajax.responseText;
           }
      }
}

 

使用 Callback 函数

callback 函数是一种以参数形式传递给另一个函数的函数。

如果您的网站上存在多个 AJAX 任务,那么您应该为创建 XMLHttpRequest 对象编写一个标准的函数,并为每个 AJAX 任务调用该函数。

该函数调用应该包含 URL 以及发生 onreadystatechange 事件时执行的任务(每次调用可能不尽相同):

<script>
var xmlhttp;
function ajax(url,callback){
   xmlhttp=new XMLHttpRequest();
   xmlhttp.onreadystatechange=callback;
   xmlhttp.open('GET',url,true);
   xmlhttp.send();
}

function myfunction(){
	ajax('abc.txt',function(){ //回调函数就是ajax执行完了在回头调用自己参数里面的函数callback;
		if (xmlhttp.readyState==4 && xmlhttp.status==200) {
			document.getElementById('id').innerHTML=xmlhttp.responseText;
		}
	})
}
</script>

 

 

 

 

 

posted @ 2014-04-25 02:20  选择了就坚持  阅读(100)  评论(0)    收藏  举报