码迷,mamicode.com
首页 > Web开发 > 详细

Ajax基础知识

时间:2014-11-01 00:54:22      阅读:274      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   io   color   os   ar   使用   java   

一、Ajax名词解释

AJAX: Asynchronous Javacript and XML

中文意思:异步Javascript和XML.指一种创建交互式网页应用的网页开发技术。(AJAX是一

种网页开发技术,主要用于创建交互式网页开发)

 

又不仅仅是一种单一的技术,而是有机的利用了一系列的相关技术:

简单理解为:Javascrip + XMLHttpRequest + CSS + 服务器端 的集合

 

二、AJAX的优点:

 1.0 Ajax在本质上是一个浏览器端的技术

 2.0 Ajax技术主要目的在于局部交换客户端以及服务器之间的数据

 3.0 Ajax这个技术的主角XMLHttpRequest的最主要特点,在于能够不用重新载入整个版面来更新资料,也就是所谓的 Refresh wihtout Reload(轻刷新)

 4.0 与服务器之间的沟通,完全是透过Javascript 来实行

 5.0 使用XMLHttpRequest本身传送的数据量很小,所以反应会更快,也就是让网络程式更像一个 桌面应用程序

 6.0 Ajax就是运用Javascript在后台悄悄帮你去服务器要资料,最后再由Javascript或DOM来帮你呈现结果,因为所有动作都是有Javascript代劳,所以省去了网页重载的麻烦,使用者也感受不到等待的痛苦

 

三、异步对象其中的readyState属性

readyState属性指出了XMLHttpRequest对象在发/接收数据过程中所处的几个状态。XMLHttpRequest对象会经历5中不同的状态

0:未初始化,new完后。

1:已打开。对象已经创建并初始化,但还未调用send方法

2:已发送。已经调用send方法,但该对象正在等待状态码和头的返回

3:正在接收。已经接收了部分数据,但还不能使用该对象的属性和方法,因为状态和响应头部完整

4:已加载。所有的数据接收完毕

 

四、Ajax的Get请求与Post请求

 1             //Ajax的Get请求
 2             //1.0 获取异步对象
 3             var xhr = new XMLHttpRequest();
 4             //2.0 设置参数
 5             xhr.open("get", "/A01_GetDate.ashx", true);
 6             //3.0 不使用缓存
 7             xhr.setRequestHeader("If-Modified-Since", "0");
 8             //4.0 设置回调函数
 9             xhr.onreadystatechange = function () {
10                 if (xhr.readyState == 4 && xhr.status == 200) {
11                     alert(xhr.responseText);
12                 }
13             };
14             //5.0 发送请求
15             xhr.send();
 1             //Ajax的Post请求
 2             //1.0 创建异步对象
 3             var xhr01 = new XMLHttpRequest();
 4             //2.0 设置异步对象的参数
 5             xhr01.open("post", "/yyy.ashx", true);
 6             //3.0 将传入的参数放入form中给服务器
 7             Xhr01.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
 8             //4.0 设置回调函数
 9             xhr01.onreadystatechange = function () {
10                 if (xhr01.readState == 4 && xhr01.status == 200) {
11                     alert(xhr01.responseText);
12                 }
13             };
14             //5.0 发送请求
15             xhr01.send("name=jack&id=11");

 

Ajax基础知识

标签:style   blog   http   io   color   os   ar   使用   java   

原文地址:http://www.cnblogs.com/lucklongwen/p/4066281.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!