Ajax学习

Ajax概述

Ajax全称: Asynchronous JavaScript and XML (异步的JavaScript和XML)
Ajax不是某种编程语言，是一种在无需重新加载整个网页的情况之下能够更新部分网页的技术。
使用ajax技术的网页，通过在后台跟服务器进行少量的数据交换，网页就可以实现异步局部更新。

Ajax使用解析

首先实例化一个 XMLHttpRequest对象
var request = new XMLHttpRequest();
IE5,IE6如何实现，需要判断一下

示例代码


var request;
if(window.XMLHttpRequest) {
	request = new XMLHttpRequest();  //ie7+, FireFox, Chrome, Opera, Safari...
}else {
	request = new ActiveXObject("Microsoft.XMLHTTP");  //IE6,IE5
}

HTTP请求

http是计算机通过网络进行通信的规则，使浏览器向服务器请求信息和服务

HTTP是一种无状态协议 （不建立持久的连接，服务端不保留相关的连接信息）

一个完整的HTTP请求过程，通常有下面7个步骤：


	1.建立TCP连接
	2.Web浏览器向Web服务器发送请求命令
	3.Web浏览器发送请求头信息
	4.Web服务器应答
	5.Web服务器发送应答头信息
	6.Web服务器向浏览器发送数据
	7.Web服务器关闭TCP连接

一个HTTP请求一般由四部分组成：


	1.HTTP请求的方法或动作，比如是GET还是POST请求
	2.正在请求的URL
	3.请求头，包含一些客户端环境信息，身份验证信息等
	4.请求体，也就是请求正文，请求的正文可以包含客户提交的查询字符串信息，表单信息等等

GET

GET: 一般用于信息获取 使用URL传递参数

对所发送信息的数量也有限制，一般在2000个字符

POST

PSOT: 一般用于修改服务器的资源

对所发送信息的数量无限制

一个HTTP响应一般由三部分组成：


	1.一个数字和文字组成的状态码，用来显示请求成功还是失败
	2.响应头，响应头也和请求头一样包含许多有用的信息 例如：	服务器类型、日期时间、内容类型和长度等
	3.响应体，也就是响应正文。

XMLHttpRequest发送请求

示例代码


	open(method, url, async)
	send(string)

	request.open("GET", "get.php", true);
	request.send();

	request("POST", "create.php", ttrue);
	request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	request.send("name=Aseoe&sex=男");

XMLHttpRequest取得响应

responseText:获得字符串形式的响应数据
responseXML: 获得XML形式的响应数据
status和statusText:以数字和文本形式返回HTTP状态码
getALLResponseHeader():获取所有的响应报头
getResponseHeader():查询响应中的某个字段的值

readyStatus属性

0: 请求未初始化，open还没有调用

1: 服务器连接已建立，open已经调用了

2: 请求已接收，也就是接收到头信息了

3: 请求处理中，也就是接收到响应主体了

4: 请求已完成，且响应已就绪，也就是响应完成了

示例代码


var request = new XMLHttpRequest();
	request.open("GET", "get.php", true);
	request.send();
	request.onreadystatechange = function() {
		if(request.readyState===4&&request.status===200) {
			request.responseText//做一些事情
		}
	}

Ajax案例

ajax简单案例，仅供参考学习。更多案例请移步【爱思资源网】主页搜索

JS - Ajax案例


查看效果    下载案例

jQuery - Ajax案例


查看效果    下载案例

JSON - AJAx案例


查看效果    下载案例

你可能会想了解

1. JSON入门学习 >>> 【快速学习】
2. jQuery Ajax学习 >>> 【快速学习】
3. Ajax 跨域问题 >>> 【快速学习】
4. Ajax 技术原理 >>> 【快速学习】

关注爱思资源网 了解Web前端开发最新动态

【官网】: www.aseoe.com

【论坛】: bbs.aseoe.com

【问答】: ask.aseoe.com

【QQ群】: 42148738 [立即加入]