Ajax笔记
早期做项目的时候网页交互数据的上传和下发一般都要通过刷新浏览器的方式来实现,Ajax这一技术的出现,使得我们可以拥有创建快速动态网页交互的技术。
AJAX全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML)
AJAX 不是新的编程语言,而是一种使用现有标准的新方法。
AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。
AJAX 不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行
它的使用场景:
Ajax的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer 5中首次引入,它是一种支持异步请求的技术。简而言之,XmlHttpRequest使我们可以使用JavaScript向服务器提出请求并处理响应,而不阻塞用户。
在创建Web站点时,在客户端执行屏幕更新为用户提供了很大的灵活性。下面是使用Ajax可以完成的功能:
动态更新购物车的物品总数,无需用户单击Update并等待服务器重新发送整个页面。
提升站点的性能,这是通过减少从服务器下载的数据量而实现的。例如,在某购物车页面,当更新篮子中的一项物品的数量时,会重新载入整个页面,这必须下载整个页面的数据。如果使用Ajax计算新的总量,服务器只会返回新的总量值,因此所需的带宽仅为原来的百分之一。 消除了每次用户输入时的页面刷新。例如,在Ajax中,如果用户在分页列表上单击Next,则服务器数据只刷新列表而不是整个页面。
直接编辑表格数据,而不是要求用户导航到新的页面来编辑数据。对于Ajax,当用户单击Edit时,可以将静态表格刷新为内容可编辑的表格。用户单击Done之后,就可以发出一个Ajax请求来更新服务器,并刷新表格,使其包含静态、只读的数据。
Ajax的工作原理相当于在用户和服务器之间加了—个中间层,使用户操作与服务器响应异步化。这样把以前的一些服务器负担的工作转嫁到客户端,利于客户端闲置的处理能力来处理,减轻服务器和带宽的负担,从而达到节约ISP的空间及带宽租用成本的目的。
Ajax请求过程:
1.创建Ajax核心对象XML
var xml
2.向服务器发送请求
3.服务器响应处理
responseText 获得字符串形式的响应数据。
responseXML 获得XML 形式的响应数据。
3.1.同步处理
document.getElementById("mydiv").innerHTML=xmlhttp.responseText;
直接在send()后面处理返回来的数据。
3.2异步处理
异步处理相对比较麻烦,要在请求状态改变事件中处理。
一共有5中请求状态,从0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成,且响应已就绪
请求方式: GET 还是 POST?
与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用:
然而,在以下情况中,请使用 POST 请求:
· 无法使用缓存文件(更新服务器上的文件或数据库)
· 向服务器发送大量数据(POST 没有数据量限制,传递参数大于四个就应该用POST)
· 发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠
GET 请求
GET请求具有以下的几个特点:
· GET 请求可被缓存
· GET 请求保留在浏览器历史记录中
· GET 请求可被收藏为书签
· GET 请求不应在处理敏感数据时使用
· GET 请求有长度限制
· GET 请求只应当用于取回数据
POST 请求:
一个简单 POST 请求:
如果需要像 HTML 表单那样 POST 数据,请使用setRequestHeader() 来添加
setRequestHeader(header,value) 向请求添加头 ▪ header: 规定头的名称; ▪ value: 规定头的值
POST请求的特点如下:
· POST 请求不会被缓存
· POST 请求不会保留在浏览器历史记录中
· POST 请求不能被收藏为书签
· POST 请求对数据长度没有要求
· 200: “OK”
· 304:该资源在上次请求之后没有任何修改(这通常用于浏览器的缓存机制,使用GET请求时尤其需要注意)。
· 403 (禁止) 服务器拒绝请求。
· 404 (未找到) 服务器找不到请求的网页。
· 408 (请求超时) 服务器等候请求时发生超时。
·500 (服务器内部错误) 服务器遇到错误,无法完成请求。