AJAX入门知识(1)

前端之家收集整理的这篇文章主要介绍了AJAX入门知识(1)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

认识AJAX

1、AJAX指异步JavaScript及XML

2、AJAX不是一个新的编程语言,而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术。它可使因特网应用程序更小、更快,更友好。

3、AJAX使用Http请求,由于每当用户提交输入后服务器都会返回一张新的页面,传统的 web 应用程序变得运行缓慢,且越来越不友好。通过利用 AJAX,您的 JavaScript 会通过 JavaScript 的XMLHttpRequest 对象,直接与服务器来通信。通过使用 XMLHttpRequest 对象,web 开发者可以做到在页面已加载后从服务器更新页面

4、游览器对AJAX的支持,由于AJAX的要点是XMLHttpRequest 对象,针对不同的游览器,创建 XMLHttpRequest 对象的方法是有差异的,我们可以是用一下代码来根据不同的游览器来实现创建 XMLHttpRequest 对象:

function ajaxFunction(){
	var xmlHttp;
	try{
		//Firefox,Opera8.0+,Safari
		xmlHttp = new XMLHttpRequest();
		alert("success!");
	}catch(e){
		//IE 6.0+
		try{
			xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
			alert("success!");
		}catch(e){
			try{
				//IE5.0+
				xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
				alert("success!");
			}catch(e){
				alert("您的游览器不支持AJAX");
				return false;
			}
		}
	}
}

当然我们也可以这样判断一个游览器是否支持XMLHttpRequest 对象,并且创建相应的对象实例

function funXHR(){
	var xmlHttp;
	if(window.XMLHttpRequest){
		// code for IE7+,Firefox,Chrome,Opera,Safari
		xmlHttp = new XMLHttpRequest();
	}else{
		// code for IE6,IE5
		xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
	}
}

AJAX基础知识

1、关于XMLHttpRequest对象

a)onreadystatechange属性,onreadystatechange属性存有处理服务器相应的函数

xmlHttp.onreadystatechange=function(){ 
//代码段  定义一个空函数,可同时对 onreadystatechange 属性进行设置
}

b)readyState属性,readyState 属性存有服务器响应的状态信息。每当 readyState 改变时,onreadystatechange 函数就会被执行。

readyState可能值:0(请求未初始化在调用 open() 之前)、1(请求已提出,调用 send() 之前)、2(请求已发送,这里通常可以从响应得到内容头部)3、(请求处理中,响应中通常有部分数据可用,但是服务器还没有完成响应)4,、(请求已完成,可以访问服务器响应并使用它)

xmlHttp.onreadystatechange=function(){ 
	//请求已经完成
	if(xmlHttp.readyState == 4){
		//从服务器的response获得数据
	}
}
c)responseText属性,可以通过该属性取回由服务器返回的数据
xmlHttp.onreadystatechange=function(){ 
	//请求已经完成
	if(xmlHttp.readyState == 4){
		//从服务器的response获得数据
		document.getElementById("time").value = xmlHttp.responseText;//将一个ID为time的HTML元素的值设置为responseText
	}
}

2、向服务器发送请求

如需将请求发送到服务器,我们使用 XMLHttpRequest 对象的 open() 和 send() 方法

xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();
open( method,url,async)参数:method表示请求类型,有GET或POST(推荐使用POST);url表示请求的文件在服务器上的位置,async表示异步(true)或同步(false)

send()方法表示将请求发送到服务器。

3、服务器的响应

如需获得来自服务器的响应,请使用 XMLHttpRequest 对象的 responseText(字符串方式的响应) 或 responseXML 属性(XML 形式的响应)。

对于responseText方式可以直接使用其值

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;//设置一个ID为myDiv的HTML元素的值为responseText;
对于responseXML,其响应内容为responseXML对象,需要对其内容进行提取后使用。

猜你在找的Ajax相关文章