• Ajax技术


    一、XMLHttpRequest对象

      它是一个具有应用程序接口的JavaScript对象,能够使用超文本传输协议(HTTP)连接一个服务器。

      初始化:var http_request = new ActiveXObject("Msxml2.XMLHTTP");或者var http_request = new ActiveXObject(Microsoft.XMLHTTP");

          var http_request = new XMLHttpRequest();

      1、XMLHTTPRequest对象的常用方法

        ① open( method , URL , asyncFlag )

          method:get或者post

          URL:请求地址,可以是绝对地址或者相对地址,并且可以查询字符串

          asyncFlag:可选参数,用于指定请求参数,异步请求为true,同步请求为false,默认为true

        ② sen( content )

          content:用于指定发送的数据,可以使DOM对象的实例、输入流或者字符串,也可以是什么都不填

        ③ setRequestHeader( label , value )

          label:用于指定HTTP头

          value:用于为指定的HTTP头设置值

         abort()

          用于停止当前异步请求

         getRequestHeader( headerLabel )

          headerLabel:用于指定HTTP头,包括server、Content-Type和Date等

         getResponseHeaders()

           用于以字符串形式返回完整的HTTP头信息。

      2、XMLHttpRequest对象的常用属性

    属性 描述

    onreadystatechange

    每个状态改变时都会触发这个事件处理器,通常会调用一个JavaScript函数
    readyState

    请求的状态。有以下5个取值:

    0=未初始化

    1=正在加载

    2=已加载

    3=交互中

    4=完成

    responseText

    服务器的响应,表示为字符串

    responseXML

    服务器的响应,表示为XML。这个对象可以解析为一个DOM对象
    status

    返回服务器的HTTP状态码,如:

    200=“成功”

    202=”请求被接受,但尚未成功“

    400=“错误的请求”

    404=“文件未找到”

    500=“内部服务器错误”

    statusText 返回HTTP状态码对应的文本,如OK或者Not Found(未找到)等

    二、传统Ajax工作流程

      1、发送请求

        ①初始化XMLHttpRequest对象

    if(window.XMLHttpRequest){
        xmlhttp = new XMLHttpRequest();
    }else if(window.ActiveXObject){
        xmlhttp = new ActiveXObject(Microsoft.XMLHTTP);
    }

        ②为XMLHTTPRequest对象指定一个回调函数,用于对返回结果进行处理

    xmlhttp.onreadystatechange = function(){getResult(param)};//调用回调函数

        ③创建个与服务器的连接

    xmlhttp.open("GET",url,true)
    
    xmlhttp.open("POST",url,true)
    
    //url可以是一个JSP页面的URL地址,也可以是Servlet的映射地址

        ④向服务器发送请求

    //向服务器发送GET请求
    xmlhttp.send();
    //向服务器发送POST请求 //无参数: xmlhttp.send(); //有参数: var param = "user="+form1.user.value+"&pwd="+form1.pwd.value;//组合参数 xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//在发送POST请求前,需要设置正确的请求头 xmlhttp.send(param);

      2、处理服务器响应

        ①处理字符串响应

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

        ②处理XML响应

    function getResult(){
        if(xmlhttp.readyState==4&&xmlhttp.status==200){
            var xmlDoc = xmlhttp.responseXML;
            var message = "";
            for(i=0;i<xmlhttp.getElementsByTagName("board").length;i++){
                var board = xmlDoc.getElementsByTagName("board").item(i);
                message = message+board.getAttribute("name");
                document.getElementsById("msg").innerHTML=message;
            }
        }
    }

     三、jQuery实现Ajax

      1、$.get(url [,data] [,success(data,textStatus,jqXHR)] [,dataType])

        url:请求页面的URL地址

        data:可选参数,发送至服务器的key/value数据。(data参数会自动添加到url中,如果url中的某个参数又通过data参数进行传递,get()方法是不会自动合并相同名称的参数的。)

        success(data,textStatus,jqXHR):可选参数,用于指定载入成功后执行的回调函数。其中,data用于保存呢返回的数据;testStatus为状态码(可以是timeout、error、notmodified、success或parsererror);jqXHR为XMLHTTPRequest对象。不过回调函数只有当testStatus的值为success时才会执行,如果需要在出错的时候也执行,那么就需要使用$.ajax()方法实现。

        dataType:可选参数,用于指定返回数据的类型,可以是xml、json、script或者html。默认值为html

    $.get("check.jsp",{user:$("#username").val()},function(data){alert(data);});

      2、$.post(url [,data] [,success(data,textStatus,jqXHR)] [,dataType])

        

        url:请求页面的URL地址

        data:可选参数,发送至服务器的key/value数据。(data参数会自动添加到url中,如果url中的某个参数又通过data参数进行传递,get()方法是不会自动合并相同名称的参数的。)

        success(data,textStatus,jqXHR):可选参数,用于指定载入成功后执行的回调函数。其中,data用于保存呢返回的数据;testStatus为状态码(可以是timeout、error、notmodified、success或parsererror);jqXHR为XMLHTTPRequest对象。不过回调函数只有当testStatus的值为success时才会执行,如果需要在出错的时候也执行,那么就需要使用$.ajax()方法实现。

        dataType:可选参数,用于指定返回数据的类型,可以是xml、json、script或者html。默认值为html

    $.post("check.jsp",{title:"祝福",content:"祝愿天下有情人不成眷属"},function(data){alert(data);});
    

      3、JSON数据

        ①对象(名称/值):{"属性1":属性值1,"属性2":属性值2······"属性n":属性值n}

        ②数组(值得有序列表):{"数组名":[对象1,对象2,对象3,······,对象n]}

      4、$.ajax(url [,settings])

        url:必选参数,用于发送请求的地址(默认为当前页)

        settings:可选参数,用于进行Ajax请求设置,包含许多可选的设置参数,都是以key/value形式体现的。常用的设置参数如表所示

    设置参数

    说明

    type

    用于指定请求方式,可以设置为GET或者POST,默认值为GET
    data

    用于指定发送到服务器的数据,如果数据不是字符串,将自动转换为请求字符串格式。在发送GET请求时,该数据将附加在URL的后面。设置processData参数为false,可以禁止自动转换。

    该设置参数的值必须为key/value格式。如果为数组,jQuery将自动为不同值对应同一个名称。

    dataType

    用于指定服务器返回数据的类型。如果不指定,jQuery将自动根据HTTP包的MIME信息返回responseText或responseXML,并作为回调函数参数传递,可用值如下:

    text:返回纯文本字符串

    xml:返回xml文档,可用jQuery进行处理

    html:返回纯文本HTML信息(包含的<script>元素会在插入DOM后执行)

    script:返回纯文本JavaScript代码。不会自动缓存结果,除非设置了cache参数。

    json:返回JSON格式的数据

    jsonp:JSONP格式。使用JSONP形式调用函数时,如果存在代码“url?callback=?”,那么jQuery将自动替换“?”为正确的函数名,以执行回调函数

    async

    设置发送请求的方式,默认是true,为异步请求方式,同步请求方式可以设置成false

    beforeSend(jqXHR,Settings)

    用于设置一个发送请求前可以修改XMLHttpRequest对象的函数,如添加自定义HTTP头等

    complete(jqXHR,textStatus)

    用于设置一个请求为完成后的回调函数,无论成功或失败,该函数均被调用

    error(jqXHR,textStatus,errorThrown)

    用于设置请求失败时调用的函数

    success(data,textStatus,jqXHR)

    用于设置请求成功时调用的函数

    global

    用于设置是否触发全局Ajax事件。设置为true时,触发全局Ajax事件;设置为false则不处罚全局Ajax事件。默认值为true

    timeout

    用于设置请求超时的时间(单位为毫秒)。此设置将覆盖全局设置

    cache

    用于设置是否从浏览器缓存中加载请求信息,设置为true将会从浏览器缓存中加载请求信息。默认值true,当dataType的值为script何jsonp时值为false
    doFilter(data,type)

    用于指定将Ajax返回的原始数据进行预处理的函数。提供了data和type两个参数:data是Ajax返回的原始数据,type是调用$.ajax()方法时提供的dataType参数。

    函数返回的值将由jQuery进一步处理

    contentType

    用于设置发送信息数据值服务器内容编码类型,默认值为applciation/x-www-form-urlencoded,该默认值使用大多数应用场合

    ifModified

    用于设置是否仅在服务器数据改变时获取新数据。使用HTTP包的Last-Modified头信息判断,默认值为false
    $.ajax({
        url:"chatServlet",  //设置请求地址
        type:"GET",            //设置请求方式
        dataType:"json",    //设置返回数据的类型
        data:{                //设置传递的数据
            "action":"get",
            "nocache":new Date().getTime(),
        },
        //设置请求成功时执行的回调函数
        success:function(data){
            var message = "";
            var chats = eval(data);
            $.each(chats.function(i){
                message +="<br/>"+chats[i].message;
            };
            $("#content").html(message);
        },
        //设置请求失败时执行的回调函数
        error:function(){
            alert("请求失败!");
        }
    });
  • 相关阅读:
    在zend framework框架中try{}catch(Exception e){}的跳转问题
    【上】安全HTTPS-全面具体解释对称加密,非对称加密,数字签名,数字证书和HTTPS
    iOS 图像处理-剪裁图像
    Delphi DBGrid记录全选和反选拖动处理
    在DbGrid中,不按下Ctrl,单击鼠标如何实现多选?谢谢
    在DBGrid中实现多选功能
    回车跳到下一个EDIT
    远程控制篇:用Delphi模拟键盘输入/鼠标点击
    SQL的拼接语句在DELPHI中怎么写
    Delphi DbGridEh实现表格没有内容的渐变效果
  • 原文地址:https://www.cnblogs.com/a591378955/p/8147003.html
Copyright © 2020-2023  润新知