Ajax基础

AJAX基础

Tags: ajax学习笔记
ajax是一种在无需加载整个网页情况下还能更新部分网页的技术

---

什么是ajax

：AJAX = 异步 JavaScript 和 xml
ajax 是一种应用于快速创建动态网页的技术，通过在后台与服务器少量的数据交换，Ajax可以使网页实现异步更新，（在无需刷新整个页面的情况下进行网页部分更新）

---

XMLHttpRequest

是 AJAX 的基础。 (简称XHR)
XMLHttpRequest 用于在后台与服务器交换数据。所有的现代浏览器都支持XMLHttpRequest 对象（IE5,6使用ActiveXObject）

---

创建XHR对象

`variable=new XMLHttpRequest();`

老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象
variable=new ActiveXObject("Microsoft.XMLHTTP");
所以，为了兼容所有现代浏览器，可以封装

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");
  }

---

向服务器发送请求

再次声明XMLHttpRequest对象用于和服务器交换数据
如需将请求发送到服务器，使用XHR对象的 open（） 和 send（）方法
例：

xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();

方法：
open(method, url , async)

三个参数分别为

1. (method)规定请求的类型，post 或 get
2. (url) 路径（文件在服务器上的位置）
   该文件可以是任何类型的文件，比如.txt和 .xml，或者服务器脚本文件，比如 .asp 和 .php （在传回响应之前，能够在服务器上执行任务）。
3. （async）true（异步） 或 false(同步)
   XHR如果要用于AJAX open 方法的async参数必须是true;

send(string)
将请求发送到服务器。
string：仅用于 POST 请求

get和post
与post相比 get 更简便也更快，且大多数时候都能使用，在以下情况必须使用Post

• 无法使用缓存文件（更新服务器上的文件或数据库）
• 向服务器发送大量数据（POST 没有数据量限制）
• 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

有关于get 和 post的示例
如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定发送的数据：

• 方法： setRequestHeader(header ,value)
  给请求加上HTTP头

---

服务器响应

XHR对象的两个属性

1. responseText 获得字符串形式的响应数据
2. responseXML 获得 XML 形式的响应数据。

如果来自服务器的响应不是xml，都是用responseText 属性
两种属性示例

---

AJAX-onreadystatechange事件

当请求被发送到服务器时，就需要执行一些基于响应的任务
每当 readyState 改变，就会触发onreadystatechange 事件，
而readytState 的属性存有XMLHttpRequest 的状态信息.

• onreadyState :存有XMLHttpRequest 的状态。从 0 到 4 发生变化。
  0: 请求未初始化
  1: 服务器连接已建立
  2: 请求已接收
  3: 请求处理中
  4: 请求已完成，且响应已就绪
• onreadystatechange: 存储函数，每当readystate 改变时就会调用该函数。
• status （HTTP状态码）
  200： ok;
  404: 未找到页面
  503： 服务器暂时不可用
  onreadyststechange 规定了在服务器响应已做好被处理准备时所执行的任务，readyState = 4,且status = 200时，响应已经就绪。