AJAX复习笔记

AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。通过在后台与服务器进行少量数据交换,AJAX 可况下更新以使网页实现异步更新

工作原理:

AJAX是基于现有的Internet标准

  • AJAX是基于现有的Internet标准,并且联合使用它们:

  • XMLHttpRequest 对象 (异步的与服务器交换数据)

  • JavaScript/DOM (信息显示/交互)

  • CSS (给数据定义样式)

  • XML (作为转换数据的格式)

XHR创建对象

XMLHttpRequest 对象

XMLHttpRequest 对象用于在后台与服务器交换数据。

XMLHttpRequest 对象是开发者的梦想,因为您能够:

  • 在不重新加载页面的情况下更新网页
  • 在页面已加载后从服务器请求数据
  • 在页面已加载后从服务器接收数据
  • 在后台向服务器发送数据

一  、创建XMLHttpRequest 对象

   老版本的建 XMLHttpRequest 对象方法(IE5和IE6)

1 var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

 

   一般语法:


1 var xmlhttp=new XMLHttpRequest()

兼容代码
 1 if (window.XMLHttpRequest)
 2     {
 3         //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
 4         xmlhttp=new XMLHttpRequest();
 5     }
 6     else
 7     {
 8         // IE6, IE5 浏览器执行代码
 9         xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
10     }

二 、向服务器发送XMLHtppRequest请求


1 xmlhttp.open("GET","test1.txt",true);
2 xmlhttp.send();
方法 描述
open(method,url,async)  

规定请求的类型、URL 以及是否异步处理请求。

method:请求的类型(GET 或 POST)

url:文件在服务器上的位置

async:true(异步)或 false(同步)    

send(string)    

将请求发送到服务器。

string:仅用于 POST 请求    

GET 还是 POST?

与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。

然而,在以下情况中,请使用 POST 请求:

  • 无法使用缓存文件(更新服务器上的文件或数据库)

  • 向服务器发送大量数据(POST 没有数据量限制)

  • 发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠

三、XHR响应
如需获得来自服务器的响应,请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性
属性 描述
responseText 获得字符串形式的响应数据
responseXML 获得 XML 形式的响应数据

  responseText 属性


如果来自服务器的响应并非 XML,请使用 responseText 属性。

responseText 属性返回字符串形式的响应,因此您可以这样使用:


1 document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

  responseXML 属性

如果来自服务器的响应是 XML,而且需要作为 XML 对象进行解析,请使用 responseXML 属性:

请求 demo.xml 文件,并解析响应:

四、XHR ReadyState

onreadystatechange 事件

当请求被发送到服务器时,我们需要执行一些基于响应的任务。

每当 readyState 改变时,就会触发 onreadystatechange 事件。

readyState 属性存有 XMLHttpRequest 的状态信息。

下面是 XMLHttpRequest 对象的三个重要的属性:

属性描述
onreadystatechange 存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。
readyState

存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

  • 0: 请求未初始化
  • 1: 服务器连接已建立
  • 2: 请求已接收
  • 3: 请求处理中
  • 4: 请求已完成,且响应已就绪
status 200: "OK"
404: 未找到页面

在 onreadystatechange 事件中,我们规定当服务器响应已做好被处理的准备时所执行的任务。

当 readyState 等于 4 且状态为 200 时,表示响应已就绪:

 

posted @ 2019-03-20 18:54  一路向北√  阅读(236)  评论(0编辑  收藏  举报

web应用开发&研究 -

业精于勤而荒于嬉。

工作,使我快乐。


Font Awesome | Respond.js | Bootstrap中文网