zoukankan      html  css  js  c++  java
  • Ajax基本概念和原理

    什么是Ajax

    Ajax 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。

    Ajax的全称是Asynchronous JavaScript and XML,即异步JavaScript+XML。它并不是新的编程语言,而是几种原有技术的结合体。它由以下几种技术组合而成,包括:

    • HTML/XHTML——主要的内容表示语言。
    • CSS——为XHTML提供文本格式定义。
    • DOM——对已载入的页面进行动态更新。
    • XML——数据交换格式。
    • XSLT——将XML转换为XHTML(用CSS修饰样式)。
    • XMLHttp——用XMLHttpRequest来和服务器进行异步通信,是主要的通信代理。
    • JavaScript——用来编写Ajax引擎的脚本语言。

    实际上,在Ajax解决方案中这些技术都是可用的,不过只有三种是必须的:HTML/XHTML、DOM以及JavaScript。

    XMLHttpRequest对象

    当需要异步与服务器交换数据时,需要XMLHttpRequest对象来异步交换。XMLHttpRequest对象的主要属性有:

    • onreadystatechange——每次状态改变所触发事件的事件处理程序。
    • responseText——从服务器进程返回数据的字符串形式。
    • responseXML——从服务器进程返回的DOM兼容的文档数据对象。
    • status——从服务器返回的数字代码,如404(未找到)和200(已就绪)。
    • status Text——伴随状态码的字符串信息。
    • readyState——对象状态值。对象状态值有以下几个:
      • 0 - (未初始化)还没有调用send()方法
      • 1 - (载入)已调用send()方法,正在发送请求
      • 2 - (载入完成)send()方法执行完成
      • 3 - (交互)正在解析响应内容
      • 4 - (完成)响应内容解析完成,可以在客户端调用了

    对于readyState的状态值,其中“0”状态是在定义后自动具有的状态值,而对于成功访问的状态(得到信息)我们大多数采用“4”进行判断。

    Ajax的核心就是是JavaScript对象XmlHttpRequest,这个对象为向服务器发送请求和解析服务器响应提供了流畅的接口。XmlHttpRequest可以使用JavaScript向服务器提出请求并处理响应,而不阻塞用户。

    XHR对象由IE5率先引入,在IE5中XHR对象是通过MSXML库中一个ActiveX对象实现的,根据IE版本不同可能会遇到不同版本XHR对象,而IE7+与其它现代浏览器均支持原生的XHR对象,在这些浏览器中我们只需使用XMLHttpRequest构造函数就可以构造XHR对象,因此一个浏览器兼容的创建XHR对象的函数写法大概是这个样子:

    var xmlhttp;
    if (window.XMLHttpRequest) {
      // code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
    } else {
      // code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }

    XMLHttpRequest对象用法

    XMLHttpRequest对象有两个重要方法 open与send。

    1 xmlhttp.open("GET","ajax_info.txt",true);
    2 xmlhttp.send();

    对于open方法,有几点需要注意:

    1. URL是相对于当前页面的路径,也可以似乎用绝对路径。
    2. open方法不会向服务器发送真正请求,它相当于初始化请求并准备发送。
    3. 只能向同一个域中使用相同协议和端口的URL发送请求,否则会因为安全原因报错。

    真正能够向服务器发送请求需要调用send方法,并仅在POST请求可以传入参数,不需要则发送null,在调用send方法之后请求被发往服务器。  

    请求发往服务器,服务器根据请求生成响应(Response),传回给XHR对象,在收到响应后相应数据会填充到XHR对象的属性,有四个相关属性会被填充:

    • responseText——从服务器进程返回数据的字符串形式。
    • responseXML——从服务器进程返回的DOM兼容的文档数据对象。
    • status——从服务器返回的数字代码,如404(未找到)和200(已就绪)。
    • status Text——伴随状态码的字符串信息。

    在收到响应后第一步是检查响应状态,确保响应是否成功返回(状态为200)。

    xhr.open('get','default.aspx,false'); //准备同步请求
    xhr.send();
    if(xhr.status>=200 && xhr.status<300 || xhr.status==304){
         //do something
    }else{
          //error handler
    }

    上面代码在发送同步请求的时候没问题,只有得到响应后才会执行检查status语句,但是在异步请求时,JavaScript会继续执行,不等生成响应就检查状态码,这样我们不能保证检查状态码语句是在得到响应后执行(实际上也几乎不可能,服务器再快一个HTTP请求也不会快过一条JavaScript执行数度),这时候我们可以检查XHR对象的readyState属性,该属性表示请求/响应过程中的当前活动阶段,每当readyState值改变的时候都会触发一次onreadystatechange事件。

    我们可以利用这个事件检查每次readyState变化的值,当为4的时候表示所有数据准备就绪,有一点我们需要注意:必须在open方法之前指定onreadtstatechange事件处理程序。

    1 xmlhttp.onreadystatechange=function(){
    2   if (xmlhttp.readyState==4 && xmlhttp.status==200){
    3     document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    4     }
    5   }
    6 xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
    7 xmlhttp.send();

    GET 还是 POST?

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

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

    • 无法使用缓存文件(更新服务器上的文件或数据库)
    • 向服务器发送大量数据(POST 没有数据量限制)
    • 发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠

    一个简单的 GET 请求:

    xmlhttp.open("GET","demo_get.html",true);
    xmlhttp.send()

    在上面的例子中,可能得到的是缓存的结果。

    为了避免这种情况,向 URL 添加一个唯一的 ID:

    xmlhttp.open("GET","demo_get.html?t=" + Math.random(),true);
    xmlhttp.send();

    如果希望通过 GET 方法发送信息,向 URL 添加信息:

    xmlhttp.open("GET","demo_get2.html?fname=Henry&lname=Ford",true);
    xmlhttp.send();

    一个简单 POST 请求:

    xmlhttp.open("POST","demo_post.html",true);
    xmlhttp.send();

    如果需要像 HTML 表单那样 POST 数据,请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据:

    xmlhttp.open("POST","ajax_test.html",true);
    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    xmlhttp.send("fname=Henry&lname=Ford");

    open() 方法的 url 参数是服务器上文件的地址:

    xmlhttp.open("GET","ajax_test.html",true);

    该文件可以是任何类型的文件,比如 .txt 和 .xml,或者服务器脚本文件,比如 .asp 和 .php (在传回响应之前,能够在服务器上执行任务)。

    异步 - True 或 False?

    XMLHttpRequest 对象如果要用于 AJAX 的话,其 open() 方法的 async 参数必须设置为 true:

    xmlhttp.open("GET","ajax_test.html",true);

    对于 web 开发人员来说,发送异步请求是一个巨大的进步。很多在服务器执行的任务都相当费时。AJAX 出现之前,这可能会引起应用程序挂起或停止。

    通过 AJAX,JavaScript 无需等待服务器的响应,而是:

    • 在等待服务器响应时执行其他脚本
    • 当响应就绪后对响应进行处理

    当使用 async=true 时,规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数:

    xmlhttp.onreadystatechange=function(){
      if (xmlhttp.readyState==4 && xmlhttp.status==200){
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
        }
      }
    xmlhttp.open("GET","ajax_info.txt",true);
    xmlhttp.send();
  • 相关阅读:
    Chrome开发者工具中Elements(元素)断点的用途
    最简单的SAP云平台开发教程
    Java实现 LeetCode 495 提莫攻击
    Java实现 LeetCode 494 目标和
    Java实现 LeetCode 494 目标和
    Java实现 LeetCode 494 目标和
    Java实现 LeetCode 493 翻转对
    Java实现 LeetCode 493 翻转对
    Java实现 LeetCode 493 翻转对
    Java实现 LeetCode 492 构造矩形
  • 原文地址:https://www.cnblogs.com/xiaoqi2018/p/10486546.html
Copyright © 2011-2022 走看看