知识整理——AJAX

作为一个大四狗，在找工作，近期都在整理以前学习的知识，如果有错误的地方，欢迎告知

AJAX

1，特点：
1，异步交互局部刷新，不必重新加载整个页面，减少用户等待的时间。
2，不是新的编程语言，是一种把一些老技术结合起来使用的新用法。
3，创建快速动态网页的技术。
4，富客户端技术，充分利用本地机器的处理能力来处理数据，不需要把某些数据发送到服务器处理

2，AJAX 的应用程序案例：
新浪微博、Google 地图

3，AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）

4，异步和同步：
异步：open请求发出，前端不去等待它的响应便执行后面的代码。
同步：open请求发出，前端就去等待它的响应，响应完成以后，再执行后面的代码。
虽然AJAX可以设置成同步的但是一般都是设置为异步的

5，四种关键元素/技术：
1，JavaScript：AJAX应用程序是使用JavaScrpit编写的，浏览器内置解析器解析
2，CSS：在AJAX应用中,用户界面的样式可以通过CSS独立修改
3，DOM(文档对象模型)：AJAX应用程序可以在运行时改变用户界面,或者高效的重绘页面中的某个部分
4，XMLHttpRequest对象：XMLHttpRequest对象允许Web程序员从web服务器以后台活动的方式获取数据。

数据格式通常是XML,但是也可以很好的支持任何基于文本的数据格式。

6，编程四步骤：

1,获取XMLHttpRequest对象

if(window.ActiveXObject){
	xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}else if(window.XMLHttpRequest){
	xmlHttp = new XMLHttpRequest();
}

2,准备请求 : 建立对服务器连接的调用

ajax.open("get",url?name=123,true/false);//true异步/false同步

ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded;");
ajax.open("post",url,true/false);//post请求不能在url后边接参数

post请求:数据要放到send("name=123")

3,准备处理响应程序

ajax.onreadystatechange = function(){}//function回调函数

readyState ：XMLHttpRequest对象的状态
0 (未初始化) 新的XMLHttpRequest对象实例已建立，但是尚未初始化（尚未调用open方法）。
1 (正在加载) 新的XMLHttpRequest对象实例已建立，尚未调用send方法。
2 (已经加载) send方法已调用，response状态未知。
3 (交互中) 客户端已接收部分response信息。
4 (完成) 数据接收完毕。

status ：状态码
服务器的HTTP状态码(200=OK 404=Not Found IE(1223)
FireFox(204)=服务器没有信息返回

responseText
后台写回的是字符串，用responseText接收。

responseXML
后台写回的是XML，用responseXML接收。

4,发送 :
get: ajax.send();

post: ajax.send("name=123&pas=123");

eg:

function abc(){
	var ajax = new XMLHttpRequest();		
	var value = document.getElementsByTagName("input")[0];	
	
	var url = "checkName?name="+value;
	ajax.open("get",url,true);
	
	ajax.onreadystatechange = function(){		
		//获取服务器反馈
		if(ajax.readyState==4 && ajax.status==200){
			//获取数据
			var data = ajax.responseText;
			var dataxml = ajax.responseXML
			// 利用js做dom操作
			...
		}
		
	};//readystatechange end
	
	ajax.send();
	
}

常见状态码：
500——服务器产生内部错误
501——服务器不支持请求的函数
403——请求不允许
404——没有发现文件、查询或URl
200——交易成功
203——返回信息不确定或不完整

猜你喜欢