• Ajax的简单总结


    1. Ajax的优势和不足

    1.1 Ajax的优势

    1. 不需要插件支持

    Ajax不需要任何浏览器插件,就可以被绝大多数主流浏览器所支持,用户只需要允许JavaScript在浏览器上执行即可。

    2. 优秀的用户体验

    Ajax能在不刷新整个页面的前提下更新数据,这使得Web应用程序能更为迅速地回应用户的操作。

    3. 提高Web程序的性能

    与传统模式相比,Ajax模式在性能上的最大区别就在于传输数据的方式,在传统模式中,数据提交是通过表单来实现的,而数据获取是靠页面刷新来重新获取整页的内容。而Ajax模式只是通过XMLHttpRequest对象向服务器端提交希望提交的数据,即按需发送。

    4. 减轻服务器的带宽的负担

    Ajax的工作原理相当于在用户和服务器之间加了一个中间层,使用户操作与服务器响应异步化。它在客户端创建Ajax引擎,把传统方式下的一些服务器负担的工作转移到客户端,便于客户端资源来处理,减轻服务器和带宽的负担。

    1.2 Ajax的不足

    1. 浏览器对XMLHttpRequest对象的支持度不足

    Ajax的不足之一首先来自于浏览器。程序员必须花费大量的精力编码以兼顾各个浏览器之间的差别,来让Ajax应用能够很好地兼容各个浏览器。

    2. 破坏浏览器前进、后退按钮的正常功能

    在Ajax中前进和后退按钮的功能都会失效。

    3. 对搜索引擎的支持的不足

    对于搜索引擎的支持也是Ajax的一项缺憾。搜索相关的爬虫程序现在还不能理解那些奇怪的JavaScript代码和因此引起的页面内容的变化。

    4. 开发和调试工具的缺乏

    JavaScript是Ajax的重要组成部分,在目前,缺少很好的JavaScript开发和调试工具。

    2.  Ajax的XMLHttpRequest对象

    Ajax的核心是XMLHttpRequest对象,它是Ajax实现的关键——发送异步请求、接收响应及执行回调都是通过它来完成的。

    XMLHttpRequest对象提供了一个相对精简易用的API。

    3.  编写第1个Ajax例子

    IE5、IE6是以ActiveXObject的方式引入XMLHttpRequest对象的,而其他浏览器的XMLHttpRequest对象是window的子对象。

    使用open()方法初始化XMLHttpRequest对象,指定HTTP方法和要使用的服务器URL。open(method,url,async) 规定请求的类型、URL以及是否异步处理请求。

    参数说明:

    method:请求的类型;GET 或 POST
    
    url:文件在服务器上的位置
    
    async:true(异步)或 false(同步)

    默认情况下,使用XMLHttpRequest对象发送的HTTP请求是异步进行的,但是可以显式地把async参数设置为true。

    因为要做一个异步调用,所以需要注册一个XMLHttpRequest对象将调用的回 调事件处理器当它的readyState值改变时调用。当readyState值被改变时,会激发一个readystatechange事件,可以使用 onreadystatechange属性来注册该回调事件处理器。

    使用send()方法发送该请求,因为这个请求使用的是HTTP的GET方式,所以可以在不指定参数或使用null参数的情况下调用send()方法。

    当请求状态改变时,XMLHttpRequest对象调用 onreadystatechange属性注册的事件处理器。因此,在处理该响应之前,事件处理器应该首先检查readyState的值和HTTP状态。 当请求完成加载(readyState值为4)并且响应已经成功(HTTP状态值为200)时,就可以调用一个JavaScript函数来处理该响应内容。

    步骤:

    1. 创建XMLHttpRequest对象

    所有现代浏览器均支持 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject)。

    XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

    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");
    }

    2. 向服务器发送XMLHttpRequest请求

    open(method,url,async),规定请求的类型、URL 以及是否异步处理请求。

    method:请求的类型;GET 或 POST
    
    url:文件在服务器上的位置
    
    async:true(异步)或 false(同步)

    send(string):将请求发送到服务器。string:仅用于 POST 请求

    xmlhttp.open("GET","test1.txt",true);
    xmlhttp.send();

    3. XMLHttpRequest响应

    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 时,表示响应已就绪:

    xmlhttp.onreadystatechange=function()
    {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
      {
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
      }
    }

    4. 服务器响应

    如需获得来自服务器的响应,请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

    responseText:获得字符串形式的响应数据。

    responseXML:获得 XML 形式的响应数据。

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

    完毕。

  • 相关阅读:
    ODOO开发-Pycharm开启debug模式
    pycharm开启debug模式报错汇总
    星辉Odoo模型开发教程4-常用字段属性
    星辉Odoo模型开发教程3-创建字段
    Business Object 开发
    Ubuntu安装masscan的两种方式
    HFish 蜜罐搭建测试
    【转】如何超过大多数人
    【译】13款入侵检测系统介绍
    【译】修复Ubuntu软件安装的锁文件问题
  • 原文地址:https://www.cnblogs.com/longshiyVip/p/4716104.html
Copyright © 2020-2023  润新知