首页 > Web开发 > 详细

AJAX复习笔记

时间:2019-03-20 19:06:12      阅读:135      评论:0      收藏:0      [点我收藏+]

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

AJAX复习笔记

原文:https://www.cnblogs.com/it-Ren/p/10566879.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!