zoukankan      html  css  js  c++  java
  • AJAX编程模板

      AJAX一直以来没怎么接触,主要是做JSON数据在服务器和客户端之间传递的时候,被玩坏了,对它莫名的不可爱,最近心理阴影小了,于是又来看看它.......

      AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

      以上是百度到的。。。

      下面自己找着教程归纳了一些。

      Asynchronous 异步通信。实现局部刷新。比如说表单注册,如果传统的页面中,如果整体传送,浪费资源。而现在的方式则是部分发送,而且可以后台发送。这就是异步的特点。而不是单一的流水线过程。提高用户体验,节约网页流量。数据一般用JSON。

      一般涉及到javascript,JSON,DOM操作。

      下面通过一个搜索框提示功能演示实例来体现AJAX的原理。

      典型的AJAX编程模板:1.创建XMLHttpReqeust对象  2.open操作初始化请求信息 3.监听处理相应结果 4.send操作发出请求。

      1.创建XMLHttpReqeust对象 :var xhr=new XMLHttpRequest();要注意浏览器的状态码:4,200,404等记得是什么意思。

      大部分浏览器都有这个函数,但是ie6浏览器低版本没有内置XMLHttpRequest(),但是ie6有一个ActiveXObject。这时候比较兼容性的创建XMLHttpRequest对象的方法如下:

    //1.创建XMLHttpReqeust对象
                var xhr=null;
                if(window.XMLHttpRequest){
                    xhr=new XMLHttpRequest();
                }else if(window.ActiveXObject){
                    try{
                        xhr=new ActiveXObject('Msxml2.XMLHTTP');
                    }catch (e){
                        try{
                            xhr=new ActiveXObject('Microsoft.XMLHTTP');
                        }catch (e){}
                    }
                }
    

      2.AJAX请求的发起

      重点有两个方法要掌握:open和send。open是初始化,而send是真正发起请求的方法。

      xhr.open('GET','http://test/keyword/hit?keyword=c',true);

      第一个参数是确认当前请求的提交方式,第二个参数是确定当前请求的目标,即url,第三个参数是确定请求时同步(false)还是异步(true),第四和第五一般不用,是帐户名和密码。

      open执行之后,就可以执行send方法了。如果open方法用的是GET方法,请求内容放到了url中,这时候send方法就不用传递参数,直接send();如果是post方法,则send方法加如参数,如xhr.send('keyword=c&other=');这是编码的方式urlencoded。当然还可以用JSON数据处理的方式,send一个字符串的形式。即:

      xhr.setRequestHeader("Content-Type","application/json");//给当前的请求设置json标志。

      xhr.send(JSON.stringify({keyword:'c',other:'test'}));JSON对象序列化格式化成JSON格式数据。不支持JSON的浏览器,有一库json2.js实现兼容。

      setRequestHeader除了Content-Type方法外,还可以加自定义的头。

      3.AJAX响应的接收和处理

      onreadystatechange接收时要先通知服务器可以接了。onreadystate的值,包括5种状态:

      0:未初始化;1:连接建立,请求发出;2:服务器返回响应;3:交互(处理相应数据);4:完成,数据可交付客户端使用。同时还要知道HTTP status的状态码:200,403,404,500..

      xhr.onreadystatechange=function(e){

      if(xhr.readyState===4&&xhr.status==200){}}

      数据准备就绪后,怎么处理?

      responseText:JSON.parse(xhr.responseText);字符串变为对象。

      还可以从响应结果中获取:getResponseHeader,getAllResponseHeader,status,statusTe。

      在浏览器F12中的Network中数据包中查看具体的数据。

    总结:

    XMLHttpReqeust API
    AJAX编程模板

    jQuery中的ajax。

        $.ajax({
            url:'',
            datatype:'',
            success:function(data){
                
            },
            error:function(){
                
            }
        });
    

      

      

  • 相关阅读:
    vue 同时使用过渡和动画
    ie和火狐事件addEventListener()及attachEvent()区别分析
    闭包的理解
    实现Date函数属性中的format方法
    js读取cookie信息
    js解决千分符问题
    js脚本语言在页面上不执行
    split使用和特殊使用(包括截取第一个字符后的数据)
    js中请求数据的$post和$ajax区别(同步和异步问题)
    禁止页面拖拽事件(数据什么的)
  • 原文地址:https://www.cnblogs.com/fanfan-nancy/p/5700982.html
Copyright © 2011-2022 走看看