Ajax和XMLHttpRequest详述

(2011-12-10 16:40:23)

标签：

ajax

xmlhttprequest

 分类： Web
Ajax：Asynchronous Javascript and XML（异步的Javascript和XML），是基于Javascript和Http请求的

功能是快速创建动态网页，即在不重新载入整个页面的情况下，对网页的某部分进行更新。
 
使用Ajax的例子：新浪微博，人人网，Google地图。
 
 
Ajax的基础是XMLHttpRequest，这个之前也讲过一些。。。
简单来说，就是
  1. 首先创建一个XMLHttpRequest对象
  2. 然后利用该对象向服务器发送请求"（在此时可以通过参数传递的方式向服务器端发送数据），读取服务器端的文件（xml、asp、php等）
  3. 最后根据读取的文件内容来更新当前页面的部分区域的内容
 
下面详细看看这三个步骤：
 
一、 XMLHttpRequest对象的创建：
在IE中： 
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP")
Firefox等其他浏览器中：
xmlhttp = new XMLHttpRequest()
 
二、 向服务器发送请求：
XMLHttpRequest对象有两个相关方法：
1. open()用于初始化HTTP请求参数，但并不发送；
语法：
open(method, url, async, username, password)
 
下面来看看每个参数代表的含义：
1）method：取值可为GET、POST和HEAD。这里重点讨论前两个。
在之前的一篇博文（http://blog.sina.com.cn/s/blog_6ccd0a110101002h.html）中，提到关于HTML中表单（form）标签的用法，当需要提交用户输入的时候，需要设置form标签中的action和method属性。其中action属性的值指定了目标页面，而method属性的值（GET或POST）则指定了发送信息的方式。
表单属性中的method和XMLHttpRequest中open()方法的method参数是相同含义。
**************************************************************************************************
下面来看看这两种请求方式的区别：
在客户端：
  • GET方式使用URL提交数据，就是说提交的数据会附加在目标URL后，以"?"与URL分开，字符数字原样发送，空格替换为"+"，其余字符使用%XX替换（XX是该字符对应的ASCII码）。
  • POST方式则是将请求的数据放置在HTTP HEADER中提交。
基于上述原因，GET方式对于提交数据有1024字节的限制，而POST方式则没有（因此上传文件只能使用POST方式）；且POST方式要比GET方式要安全，因为GET方式发送的数据是会显示在地址栏的。
 
 
更多GET和POST请求方式的区别，见http://net138.blog.163.com/blog/static/28373415200922932453486/
**************************************************************************************************
 
注：当选择请求方式为“POST”时，需要使用 setRequestHeader()方法来添加HTTP头。
 
2）url：指定了请求的目标文件地址。
3）async：取值为true或者false。指定了请求模式是同步（false）还是异步（true）。
  • 当async为true时，表示为异步请求。即请求之后，不等待响应，继续执行之后的代码。此时需要规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数。
  • 当async为false时，表示为同步请求。即请求之后，要等待完全响应才能继续执行之后的代码。（此种模式容易造成堵塞，因此推荐使用异步请求模式）
 
 
2. send()用于发送HTTP请求。
使用open()方法中指定的参数，向服务器发送请求。
 
 
**************************************************************************************************
XMLHttpRequest对象与发送请求相关的属性：readyState、status、statueText
 
1. readyState属性表示的是HTTP请求的状态，当一个XMLHttpRequest对象被创建时，这个属性值从0开始，直到接受到完整的HTTP响应，这个值增加到4。
0：Uninitialized 初始化状态。XMLHttpRequest对象已被创建或已被abort()方法重置；
1：Open open()方法已调用，但send()方法还没被调用，请求尚未发送
2：Sent send()方法已调用，HTTP请求已发送到服务器，但还没有收到响应
3：Receiving 所有响应头部已经收到。响应体开始接收但尚未完成
4：Loaded HTTP响应已经完全接收。
 
readyState属性值不会递减，除非当一个请求在处理过程中调用了open()或abort()方法。
每次这个属性值增加时，都会触发onreadystatechange事件句柄。
 
2. status属性是由服务器返回的HTTP代码状态。只能在readyState的值大于或等于3的时候读取，否则会出错。
status的值为200时，表示读取成功；而404表示"Not Found"错误。
 
3. statusText属性与status参数代表的含义相同，只是该参数使用字符串而不是数字来表示当前状态。
  • status为200时对应的statusText的值为"OK"；
  • status为404时对应的statusText的值为"Not Found"。
**************************************************************************************************
 
 
三、响应的内容
XMLHttpRequest对象有两个属性来存储响应的内容（应该就是读取的目标文件的内容）：responseText和responseXML
 
1. responseText属性：目前为止从服务器端接收到的响应体（不包括头部），如果还没有接收到数据（例如readyState<3），则是一个空字符串。
 
注：如果响应包含了为响应体指定编码的头部，则使用该编码。否则，使用Unicode UTF-8。
 
2. responseXML属性：对请求的响应，解析为XML并作为Document对象返回。
 
 
 
 
**************************************************************************************************
附一个示例，读取一个XML文件，并改写当前页面的内容：
 
<html>
<head>
<script type="text/javascript">
var xmlhttp;
 
// 函数主体
function loadXMLDoc(url)
{
  xmlhttp=null;
 
  // 初始化XMLHttpRequest对象
  if (window.XMLHttpRequest)
  {
    // Firefox等现代浏览器中的XMLHttpRequest对象创建
    xmlhttp=new XMLHttpRequest();
  }
  else if (window.ActiveXObject)
  {
    // IE中的XMLHttpRequest对象创建
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
 
  // 若创建成功，则开始解析目标XML文件
  if (xmlhttp!=null)
  {
    xmlhttp.onreadystatechange=state_Change; // 指定onreadystatechange事件句柄对应的函数
    xmlhttp.open("GET",url,true); // 初始化HTTP请求参数，GET方式，异步请求
    xmlhttp.send(null); // 发送请求
  }
  else
  {
    alert("Your browser does not support XMLHTTP.");
  }
}
 
// readyState递增时的监测函数，当"readyState==4"且"status=200"时，执行相应操作
function state_Change()
{
  if (xmlhttp.readyState==4) // 4 = "loaded"
  {
    if (xmlhttp.status==200) // 200 = "OK"
    {
      // responseText属性值是响应体的文本
      document.getElementByIdx_x('T1').innerHTML=xmlhttp.responseText;
    }
    else
    {
      alert("Problem retrieving data:" + xmlhttp.statusText);
    }
  }
}
</script>
</head>
 
<body onload="loadXMLDoc('/example/xdom/test_xmlhttp.txt')">
<div id="T1" style="border:1px solid black;height:40;width:300;padding:5"></div><br />
<button onclick="loadXMLDoc('/example/xdom/test_xmlhttp2.txt')">Click</button>
</body>
 
</html>

ajax 第四步的更多相关文章

  1. 从零开始学 Web 之 Ajax（四）接口文档，验证用户名唯一性案例

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  2. Ajax发送异步请求（四步操作）

    1.第一步(得到XMLHttpRequest) *ajax其实只需要学习一个对象:XMLHttpRequest,如果掌握了它,就掌握了ajax!! *得到XMLHttpRequest >大多数浏 ...

  3. 四步完成ajax的使用

    什么是ajax? ajax(异步javascript xml) 能够刷新局部网页数据而不是重新加载整个网页. 如何使用ajax? 第一步,创建xmlhttprequest对象,var xmlhttp ...

  4. AJAX的来龙去脉（由来）-如何被封装出来的--ajax发送异步请求（四步操作）

    <黑马程序员_超全面的JavaWeb视频教程vedio\JavaWeb视频教程_day23_ajax> \JavaWeb视频教程_day23_ajax\day23ajax_avi\14.打 ...

  5. Ajax四步操作

    第一步得到(XMLHttpRequest)function creatXMLHttpRequest(){ try{ return new XMLHttpRequest(); } catch(e){ t ...

  6. 一、JavaScript实现AJAX(只需四步)

    -----------------------------------------------一.JavaScript实现AJAX(只需四步)----------------------------- ...

  7. AJAX案例四：省市联动

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...

  8. 组件 layui 表单抓取数据四步走

    注意事项: layui 中提交按钮是基于"监听"机制实现的. form.on() 的调用需置于 layui.use 的回调函数中. 末尾的 'return false' 不可或缺, ...

  9. GoJS超详细入门（插件使用无非：引包、初始化、配参数（json）、引数据（json）四步）

    GoJS超详细入门(插件使用无非:引包.初始化.配参数(json).引数据(json)四步) 一.总结 一句话总结:插件使用无非:引包.初始化.配参数(json).引数据(json)四步. 1.goj ...

随机推荐

  1. hibernate系列笔记(1)---Hibernate增删改查

    Hibernate增删改查 1.首先我们要知道什么是Hibernate Hibernate是一个轻量级的ORMapping对象.主要用来实现Java和数据库表之间的映射,除此之外还提供数据查询和数据获 ...

  2. 【openstack N版】——手把手教你制作生产环境镜像

    一.CentOS7镜像制作 1.1创建CentOS7虚拟机 1.1.1创建虚拟磁盘 #注:尽量将虚拟机创建在控制节点,以便于将镜像上传至glance [root@linux-node1 ~]# qem ...

  3. 改变 Panel 跟 groupbox边框样式

    更改panel和groupbox的边框颜色因为在控件的属性中没有设置边框颜色的属性只有一个设置边框样式,遂在网络中搜寻出一下方法: panel的边框颜色在paint中重新对颜色进行定义 private ...

  4. 类中的两大类（string类、math类）的应用

    类是我们在学习C#的过程中很关键也是特别容易让人蒙逼得地方,类的应用直接可以调用它的属性和方法来进行判断和验证 string类(也叫字符串类) C#中的String类很有用,下面是一些它的常用方法的总 ...

  5. TCP和UDP 的区别和适用场合

    TCP和UDP式TCP/IP中能够实现传输层功能的.具有代表性的协议,其主要特点和区别如下: TCP: 面向连接的.可靠的流协议.为提供可靠性传输,TCP实行"顺序控制"或&quo ...

  6. jquery与js的区别与基础操作

    一．什么是 jQuery jQuery是一个JavaScript库,它通过封装原生的JavaScript函数得到一整套定义好的方法.它的作者是John Resig,于2006年创建的一个开源项目,随着 ...

  7. 基于JAVA语言的selenium测试基础总结

    目录一.基本语句1.循环控制(break,continue)3.字符的替换(replace,repalceFirst,replaceAll,regex)4.字符串的连接("+",a ...

  8. ReactJS React+Redux+Router+antDesign通用高效率开发模板，夜间模式为例

    工作比较忙,一直没有时间总结下最近学习的一些东西,为了方便前端开发,我使用React+Redux+Router+antDesign总结了一个通用的模板,这个技术栈在前端开发者中是非常常见的. 总的来说 ...

  9. 轻松理解JavaScript之AJAX

    摘要 AJAX技术是网页构建的必备技能之一,本文希望能帮助大家轻松的学习这项技术 一.什么是ajax? ajax(异步javascript xml) 能够刷新局部网页数据而不是重新加载整个网页. 二. ...

  10. HTML5初步了解

        一.使用HTML5的十大原因 你难道还没有考虑使用HTML5? 当然我猜想你可能有自己的原因:它现在还没有被广泛的支持,在IE中不好使,或者你就是喜欢写比较严格的XHTML代码.HTML5是w ...