• ajax异步请求的常见方式


    首先先介绍下ajax,ajax(ASynchronous JavaScript And XML)为异步的javascript和xml。所谓的异步和同步是指:

    同步:客户端必须等待服务器的响应,在等待期间客户端不能做其他操作。

    异步:客户端无须等待服务器的响应,在服务器处理请求的过程中,客户端可以进行其他的操作。

    Ajax能够在无需加载整个页面的情况下,能够更新部分网页内容,可以减小服务器的资源浪费。通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。而传统的网页如果需要更新内容,必须重新加载整个网页页面。

    ajax大体上有四种实现方式,由于基于JS的实现方式太过于复杂,基本上用不到,所以就暂不贴出其实现代码了。

    1.使用$.ajax()发送异步请求

    jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数,除非你需要操作不常用的选项,以获得更多的灵活性。 最简单的情况下,$.ajax()可以不带任何参数直接使用。 

    $.ajax的参数列表如下:

    url:(默认: 当前页地址) 发送请求的地址。

    async:(默认: true) 默认设置下,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为 false。注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。

    type:请求方式,常见参数为POST,GET等等, 默认为 "GET"。注意:其它 HTTP 请求方法,如 PUT 和 DELETE 也可以使用,但仅部分浏览器支持。

    data:请求参数。必须为 Key/Value 格式。如果为数组,jQuery 将自动为不同值对应同一个名称。如 {name:["zhangsan", "lisi"]} 转换为 '&name=zhangsan&name=lisi'。

    dataTpye:预期服务器返回的数据类型。如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息来智能判断,比如XML MIME类型就被识别为XML。在1.4中,JSON就会生成一个JavaScript对象,而script则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后,传递给回调函数。可用值如下:

        "xml": 返回 XML 文档,可用 jQuery 处理。

        "html": 返回纯文本 HTML 信息;包含的script标签会在插入dom时执行。

        "script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了"cache"参数。注意:在远程请求时(不在同一个域下),所有POST请求都将转为GET请求。(因为将使用DOM的script标签来加载)

        "json": 返回 JSON 数据 。

        "jsonp": JSONP 格式。使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。

        "text": 返回纯文本字符串

    contentType: 请求数据的类型,(默认: "application/x-www-form-urlencoded") 发送信息至服务器时内容编码类型。默认值适合大多数情况。如果你明确地传递了一个content-type给 $.ajax() 那么他必定会发送给服务器(即使没有数据要发送)。如果请求数据是json格式的,则需要填写'application/json; charset=UTF-8',否则后台无法获取到数据。

    如果要处理$.ajax()得到的数据,则需要使用回调函数。beforeSend、error、dataFilter、success、complete。

    • beforeSend 在发送请求之前调用,并且传入一个XMLHttpRequest作为参数。
    • error 在请求出错时调用。传入XMLHttpRequest对象,描述错误类型的字符串以及一个异常对象(如果有的话)
    • dataFilter 在请求成功之后调用。传入返回的数据以及"dataType"参数的值。并且必须返回新的数据(可能是处理过的)传递给success回调函数。
    • success 当请求之后调用。传入返回后的数据,以及包含成功代码的字符串。
    • complete 当请求完成之后调用这个函数,无论成功或失败。传入XMLHttpRequest对象,以及一个包含成功或错误代码的字符串。

    注意,必须确保网页服务器报告的MIME类型与我们选择的dataType所匹配。比如说,JSON的话,服务器端就必须声明application/json来获得一致的结果。

    示例:

    //发送登陆请求
    $.ajax({
      url:"/login.do" , 
      type:"POST" , 
        dataType:"text",
        data:{"name":"zhangbo"},
        success:function (data) {
            alert(data);
        },
        error:function () {
               alert("请求响应错误");
        }
    });        
    
    //加载并执行一个 JS 文件。
    $.ajax({
      type: "GET",
      url: "test.js",
      dataType: "script"
    });
    
    //装入一个 HTML 网页最新版本。
    $.ajax({
      url: "test.html",
      cache: false,
      success: function(html){
        $("#results").append(html);
      }
    });
    
    //同步加载数据。发送请求时锁住浏览器。需要锁定用户交互操作时使用同步方式。
    var html = $.ajax({
      url: "some.php",
      async: false
     }).responseText;
    
    //发送 XML 数据至服务器。设置 processData 选项为 false,防止自动转换数据格式。
    var xmlDocument = [create xml document];
     $.ajax({
       url: "page.php",
       processData: false,
       data: xmlDocument,
       success: handleResponse
     });

    2.使用$.get()发送get请求

    一个简单的 GET 请求功能 。请求成功时可调用回调函数。如果需要在出错时执行函数,请使用 $.ajax。

    $.get(url, [data], [callback], [type])的参数列表如下:

    url:待载入页面的URL地址

    data(可选):待发送 Key/value 参数。

    callback(可选):回调函数。

    type(可选):响应结果的类型。xml, html, script, json, text, _default。

    $.get("/login.do",{username:"zhangbo"},function (data) {
                    alert(data);
          },"text");

    3.使用$.post()发送post请求

    一个简单的 POST请求功能 。请求成功时可调用回调函数。如果需要在出错时执行函数,请使用 $.ajax。

    $.post(url, [data], [callback], [type])的参数列表如下:

    url:待载入页面的URL地址

    data(可选):待发送 Key/value 参数。

    callback(可选):回调函数。

    type(可选):响应结果的类型。xml, html, script, json, text, _default。

    $.post("/login.do",{username:"zhangbo"},function (data) {
                  alert(data);
                },"text");

    除了这些还有put,delete等等请求,和$.get()、$.post()差不多,就不一一叙述了。

    上述三种异步实现的方式都大同小异,使用ajax的关键就在于json格式数据的获取与响应,其他的并不难。

  • 相关阅读:
    Lua中table的实现-《Lua设计与实现》
    unity3D 知识点随手记
    游戏随笔之事件系统的设计
    游戏随笔之游戏资源池的设计
    MMORPG战斗系统随笔(四)、优化客户端游戏性能
    MMORPG战斗系统随笔(三)、AI系统简介
    vue-cli3关闭eslint语法检查
    Vue3+与Vue2共存
    php7中??和?:的区别
    react-hook生命周期
  • 原文地址:https://www.cnblogs.com/Code-Handling/p/12035121.html
Copyright © 2020-2023  润新知