08-jQuery和ajax

第八节：JQuery和ajax-1

Ajax简介 :

Asynchronous Javascript And XML （异步的JavaScript和XML）

它并不是一种单一的技术，而是有机利用一系列交互式网页应用相关的技术所形成的结合体。

Ajax优势与不足

Ajax优势

优秀的用户体验：
这是Ajax下最大的有点，能在不刷新整个页面前提下更新数据
提高web程序的性能：
与传统模式相比，Ajax模式在性能上最大的区别在于传输数据的方式，在传统模式中，数据的提交时通过表单来实现的。
Ajax模式只是通过XMLHttpRequest对象向服务器提交希望提交的数据，即按需发送减轻服务器和带宽的负担。
Ajax的工作原理相当于在用户和服务器之间加了一个中间层，似用户操作与服务器响应异步化。它在客户端创建Ajax引擎，把传统方式下的一些服务器负担的工作转移到客户端，便于客户端资源来处理，减轻服务器和带宽的负担。

Ajax的不足

浏览器对XMLHttpRequest对象的支持度不足
破坏浏览器前进、后退按钮的正常功能
对搜索引擎的支持的不足
开发和调试工具的缺乏

创建一个Ajax请求

Ajax的核心是XMLHttpRequest对象，它是Ajax实现的关键，发送异步请求、接受响应以及执行回调都是通过它来完成

1、创建ajax对象 var xhr = new XMLHttpRequest();

---

2、准备发送请求：get / post

get
传递的数据放在URL后面；
中文编码 encodeURI( '' );
缓存：在数据后面加上随机数或者日期对象或者……

post
传递的数据放在send()里面，并且一定要规定数据格式；
没有缓存问题；

form表单中:
action:
method:(默认是 get)
get: 会在url里面以 name=value , 两个数据之间用 & 连接

post:
enctype: "application/x-www-form-urlencoded"

url

是否异步
同步(false)：阻塞
异步(true)：非阻塞

---

3、正式发送请求

ajax请求处理过程

xhr.onreadystatechange = function(){
    if (xhr.readyState == 4)
    {
        alert( xhr.responseText );
    }
};

onreadystatechange：当处理过程发生变化的时候执行下面的函数
readyState：ajax处理过程
0：请求未初始化（还没有调用 open()）。
1：请求已经建立，但是还没有发送（还没有调用 send()）。
2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。
3：请求在处理中；通常响应中已有部分数据可用了，但是服务器还没有完成响应的生成。
4：响应已完成；您可以获取并使用服务器的响应了。
responseText ：请求服务器返回的数据存在该属性里面
status : http状态码