Ajax原理与是什么?如何创建一个Ajax

原创 LItieyan 随笔 Ajax 244阅读 2017-11-30 11:27:36 举报

Ajax全称是Asynchronous Javascript And XML,可以说AJax是已有技术的组合,主要用来实现客户端与服务器端的异步通信效果,实现页面局部刷新,早期的浏览器并不能原生支持Ajax,可以使用隐藏帧(iframe)方式变相实现异步效果,后来浏览器提供了对Ajax的原生支持。
使用Ajax原生方式发送请求主要通过XMLHttpRequest(标准浏览器)ActiveXObject(IE浏览器)对象实现异步效果基本步骤:

       var xhr = null;             //创建对象
        if(window.XMLHttpRequest){
             xhr = new XMLHttpRequest();
         }else{
               xhr = new ActiveXObject("Mivrosoft.XMLHTTP");
         }
         xhr.open("方式","地址","标志位");      //初始化请求
         xhr.setRequestHeader( " "," " );                //设置http头信息
         xhr.onreadystatechange = function(){

         }     //指定回调函数
         xhr.send();                                                //发送请求
        JQuery,EXTJS等提供ajaxAPI对原生的ajax进行了封装,熟悉了基础理论,在运用到框架上就会得心应手些。

/***/
项目中常用传参方法示例:

        创建自己的工具函数
        var   Util = {
                 ajax :  function(url,callback){
                       var xhr = new XMLHttpTequest();   //创建xhr对象
                       xhr.onreadystatechange = function(){                     //订阅事件
                            if(xhr.readyState === 4){
                                  if(xhr.status ===200 ){
                                       var data = JONS.parse(xhr.responseText);   //后台返回的数据
                                        callback && callback(data)                      //回调函数
                                } ;
                            }
                        }                        
                       xhr.open("get",url,true)        //open方法      我这里只是举例是get 也可以是post 
                       xhr.send(null);                          //send方法

                 }

        }
        Util.ajax(" 地址",function(data){  
             console.log(data)  // 打印数据
        });
评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复