ajax架构是什么 ajax框架

转载

mob6454cc7796a7 2023-07-30 20:49:28

文章标签 ajax架构是什么 jQuery AJAX html 文章分类 架构后端开发

1、ajax:

AJAX是指一种创建交互式网页（操作人员和系统之间存在交互作用的信息处理方式，即：访问者在移动鼠标，显示的内容在不断变化，就像对话一样有互动呈现。一打开网站所有内容都展现完了，那是老式的非交互布局）应用的网页开发技术，是一种技术而不是框架。通俗点来说，就是页面发送请求之后，还可以在当前页面进行操作，不用被阻塞着等待请求的响应，即异步请求。

2、ajax框架：

将ajax进行封装的框架，这些框架提供了Ajax快捷操作的方法，如快速异步获取一个页面，一个字符串、一个XML或JSON等。并通过回调函数对返回结果进行操作，用于实现ajax。主要包括：jQuery，prototype，MooTools，ASP.NET AJAX，Ajax.NET Professional，ExtJs等。

　　2.1、主要框架介绍

　　　　2.1.1 jQuery：

jQuery是一个轻量级（规模较小，但是功能比较全面）的javaScript（Web 的编程语言）库，也是一个快速、简洁的js框架，兼容各种浏览器和css3（用于控制网页的样式和布局）,使用户能更方便的处理HTML document、events、实现用户效果，并且方便为网页提供ajax交互。

　　　　2.1.1 mootools:

mootools是一个简洁、模块化、面向对象的JavaScript库。它能够帮助你更快、更简单地编写可扩展和兼容性强的JavaScript代码。

　　　　2.1.3 prototype：

prototype是一个基础类库，对JS做了大量的扩充，并且能很好的支持ajax。

　　　　2.1.4 另外一些不常用的框架：（链接：https://www.jianshu.com/p/8953775f3c65）

　　DWR(direct web remoting)：DWR是一个Java库，可以帮助开发者轻松实现服务器端的Java和客户端的JavaScript相互操作、彼此调用。

　　Apache Wicket：Apache Wicket是一个针对Java的Web开发框架，与Struts、WebWork、Tapestry类似。其特点在于对HTML和代码进行了有效的分离（有利于程序员和美工的合作），基于规则的配置（减少了XML 等配置文件的使用)，学习曲线较低（开发方式与C/S相似），更加易于调试（错误类型比较少，而且容易定位）。

　　Dojo Tookit：Dojo是一个强大的面向对象的JavaScript框架。主要由三大模块组成：Core、Dijit、DojoX。Core提供AJAX、events、packaging、CSS-based querying、animations、JSON等相关操作API；Dijit是一个可更换皮肤、基于模板的WEB UI控件库；DojoX包括一些创新/新颖的代码和控件：DateGrid、charts、离线应用、跨浏览器矢量绘图等。

　 Spry framework：Adobe Spry是一个面向Web设计人员而不是开发人员的AJAX框架，它使得设计人员不需要了解复杂的AJAX技巧也能在一个HTML页面中创建丰富体验成为了可能。

　　YUI：YUI（Yahoo User Interface），是由雅虎开发的一个开源的JavaScript函数库，它采用了AJAX、 DHTML和DOM等诸多技术。YUI包含多种程序工具、函数库以及网页操作界面，能够更快速地开发互动性高且丰富的网站应用程序。

　　2.2、框架之间的区别

　　　　2.2.1 jQuery和mootools的区别：

　　jQuery优于api和DOM,以及出色的插件。但是在面对一些大型项目的时候，一些功能特性上的缺陷往往需要借助插件，这就有可能导致插件乱用，导致代码逐渐冗余，故jQuery更适用于动态的小中站点。而mootools虽API和DOM都不及jQuery，但是其API和面向对象的设计更适用于大型网站。

　　　　2.2.2 jQuery和prototype的区别：

　　jQuery是通过构建一个特殊对象$来扩充，将所有的功能都放在$里；而prototype是通过原型来扩展JS的功能的。比如：

//============加载页面============
    // JQuery
    $ ( document ). ready ( function () {
            // Code
    });

    // JQuery Shorthand
    $ ( function () {
            // Code
    });


    // Prototype
    document . observe ( 'dom:loaded' , function () {
            // Code
    });

//============根据ID获取============
    // JQuery
    $ ( "#idname" );

    // Prototype
    $ ( "idname" );


//============根据类名获取============
    // JQuery
    $ ( ".classname" );

    // Prototype
    $$ ( '.classname' );

//============根据第一个符合的类名获取============
    // JQuery
    $ ( ".classname:first-child" );
    // Prototype

    $$ ( '.classname' )[ 0 ];

//============根据ID绑定监听事件============
    // JQuery 
    $ ( "#id" ). bind ( 'click' , function () {
            // Code
    });

    // JQuery Shorthand
    $ ( "#id" ). click ( function () {
            // Code
    });
    // Prototype
    $ ( "#id" ). observe ( 'click' , function () {
            // code
    });

//============根据符合的类名绑定监听事件============
    // JQuery
    $(".classname").bind('click',function(){
            // code
    });

    // JQuery Shorthand
    $ ( ".classname" ). click ( function () {
            // code
    });


    // Prototype
    $$ ( ".classname" ). invoke ( 'observe' , 'click' , function () {
            // code
    });

//============结束终止事件============
    // JQuery
    $ ( "#id" ). click ( function () {
            //code
            return false ;
    });

    // Prototype
    $ ( "id" ). observe ( 'click' , function ( e ) {
            //code
            Event . stop ( e );
    });

//============结束终止事件============
    // JQuery
    $.get(url,function(data){
            alert(data . name );
    }, 'JSON' );


    // Prototype
    new   Ajax . Request ( url ,   {
            method : 'get' ,
            onSuccess : function ( transport , json ) {
                    alert ( json . name );
            }
    });

　　　2.2.3 prototypejs和mootools的区别：

Mootools跟prototypejs相类似，语法几乎一样。但它提供的功能要比prototypejs多，而且更强大。比如增加了动画特效、拖放操作等等。

3、ajax的使用过程：

　　（1）创建XMLHttpRequest对象用于和服务器交换数据：

var xhr;
if (window.XMLHttpRequest) {//现代主流浏览器

xhr = new XMLHttpRequest();//XMLHttpRequest本身是一个构造函数，可以使用new命令生成实例。它没有任何参数。 
 
} else {// 针对浏览器，比如IE5或IE6

xhr = new ActiveXObject("Microsoft.XMLHTTP");

　　（2）open（）准备发送资源请求给服务器（即准备发送请求）：
　　　　①xhr.open(method,url,async) method包括get 和post，url主要是文件或资源的路径，async参数为true(代表异步)或者false（代表同步）
　　　　②xhr.send();使用get方法发送请求到服务器。xhr.send(string);使用post方法发送请求到服务器。　

　　　get（）和post（）的区别：

　　　　　①get（）是从服务器获取数据，且在浏览器退/刷新时是无害的；post（）是向服务器传递数据，退回时会再次请求数据。
　　　　　②get（）传送的数据量较小，且不安全，不超过2KB；post（）没有限制，且安全性高。
　　　　　③get（）把参数包含在URL中；post（）是通过request body传递参数的。
　　　　　④get（）只支持ascll字符；post（）没有限制，允许二进制。

//get：准备和执行其实可以称作一步，
xhr.open("GET", "index.html", true);//准备发送
xhr.send();//执行发送

//post
xhr.open("POST", "demo_post.asp", true);
xhr.send();

　　（3）执行发送：xhr.send（）

//======open（）方法========
    void open(
       string method,//GET、POST、PUT、DELETE、HEAD等
       string url,//目标地址
       optional boolean async,//表示请求是否为异步，默认为true。如果设为false，则send()方法只有等到收到服务器返回了结果，才会进行下一步操作。
       optional string user,//表示用于认证的用户名，默认为空字符串。
       optional string password //表示用于认证的密码，默认为空字符串。
    );
//如果对使用过open()方法的 AJAX 请求，再次使用这个方法，等同于调用abort()，即终止请求


//======send（）方法========
    //get
    var xhr = new XMLHttpRequest();
    xhr.open('GET',
      'http://www.example.com/?id=' + encodeURIComponent(id),
      true
    );
    xhr.send(null);

    //post
    var xhr = new XMLHttpRequest();
    var data = 'email='
      + encodeURIComponent(email)
      + '&password='
      + encodeURIComponent(password);

    xhr.open('POST', 'http://www.example.com', true);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.send(data);

　　（4）回调：xhr.onreadystatechange = functiion(){};

//完整例子
var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function(){
  // 通信成功时，状态值为4
  if (xhr.readyState === 4){
    if (xhr.status === 200){
      console.log(xhr.responseText);
    } else {
      console.error(xhr.statusText);
    }
  }
};

xhr.onerror = function (e) {
  console.error(xhr.statusText);
};

xhr.open('GET', '/endpoint', true);
xhr.send(null);

4、如何解决框架之间共享冲突

//方法一：
<html>
  <head>
    <script src="Mootools.js"></script>
    <script src="jquery.js"></script>
    <script>
      jQuery.noConflict();//释放jquery中$定义，并直接使用jQuery代替平时的$。
      jQuery(document).ready(function(){
        jQuery("div").hide();
      });
      $('someid').style.display = 'none';//此处中的$为原Mootools中的$，使用方法不变
    </script>
  </head>
  <body>
  </body>
  </html>
  /**
   * noConflict()方法释放 jQuery 对 $ 变量的控制 也可为jQuery 变量规定新的名称。
   * style="visibility: hidden;":直接隐藏，但占用的页面空间是不变的。
   * style="display:none":后一种方法直接是不显示，因此不占用的页面空间。
   */
 
//方法二
<html>
   <head>
     <script src="Mootools.js"></script>
     <script src="jquery.js"></script>
     <script>
       jQuery.noConflict();  
       //将你使用的jquery代码放到document ready方中
       jQuery(document).ready(function($){
         // 此处为jQuery的$定义
         $("div").hide();
      });  
       //此处为Mootools的定义
      $('someid').style.display = 'none';
     </script>
   </head>
   <body>
   </body>
</html>
 
//方法三
<html>
  <head>
     <script src="Mootools.js"></script>
     <script src="jquery.js"></script>
    <script>
      var $j = jQuery.noConflict();//以$j来替代jQuery中的$,同时区分mootools
        $j(document).ready(function(){
        $j("div").hide();
        });
       $('someid').style.display = 'none';  //原mootools中的$照旧使用
    </script>
  </head>
  <body></body>
  </html>

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。