zoukankan      html  css  js  c++  java
  • jQuery的Ajax详解

    1.Load( url, [data], [callback] )

        作用:

          载入远程HTML文件代码并插入至DOM中.

        参数:

          url (String):请求的HTML页的URL地址.

          data (Map):(可选参数)发送至服务器的 key/value 数据.

          callback (Callback):(可选参数)请求完成时(不需要是success的)的回调函数.

        说明:

          这个方法默认使用GET方式来传递的,如果[data]参数有传递数据进去,就会自动转换为POST方式的.

        讲解:

          load是最简单的Ajax函数,但是使用具有局限性:

            它主要用于直接返回HTML的Ajax接口

            load是一个jQuery包装集方法,需要在jQuery包装集上调用,并且会将返回的HTML加载到对象中,即使设置了回调函数也还是会加载.

      2.jQuery.get( url, [data], [callback], [type] )

        作用:

          使用GET方式来进行异步请求.

        参数:

          url (String):发送请求的URL地址.

          data (Map):(可选)要发送给服务器的数据,以key/value的键值对形式表示,会做为QueryString附加到请求URL中.

          callback (Function):(可选)载入成功时回调函数(只有当Response的返回状态是success才是调用该方法).

          type参数是指data数据的类型,可能的值有"xml","html","script","json","jsonp"和"text",默认为"html".

        jQuery.getJSON( url, [data], [callback] )方法就相当于 jQuery.get(url, [data], [callback], "json")

        说明:

          通过远程HTTP GET 请求载入信息.这个简单的GET请求功能以取代复杂$.ajax.请求成功时可调用回调函数.

        讲解:

          此函数发送Get请求, 参数可以直接在url中拼接,比如

          $.get("AjaxGetMethod.aspx?param=btnAjaxGet_click");

          或者通过data参数传递:

         $.get("AjaxGetMethod.aspx", { "param": "btnAjaxGet_click" });

          两种方式效果相同,data参数会自动添加到请求的url中.

      3.jQuery.getJSON( url, [data], [callback] )

        作用:

          通过HTTP GET请求载入JSON数据,与jQuery.get( url, [data], [callback], "json")这种方式等价.

        说明:

          通过HTTP GET 请求载入JSON数据.

        讲解:

          getJSON函数仅仅将get函数的type参数设置为"JSON"而已.

      4.jQuery.getScript( url, [callback] )

        作用:

          通过GET方式请求载入并执行一个JavaScript文件.

        参数:

          url (String) : 待载入JS文件地址.

          callback (Function) :(可选)成功载入后回调函数.

        说明:

          jQuery 1.4版本之前, getScript只能调用同域 JS 文件.在jQuery 1.4中, 你可以跨域调用 JavaScript文件.

        讲解:

          首先了解此函数的jQuery内部实现,仍然使用get函数,jQuery所有的Ajax函数包括get最后都是用的是jQuery.ajax().

      5.jQuery.post( url, [data], [callback], [type] )

        作用:

          使用POST方式来进行异步请求

        参数:

          url (String): 发送请求的URL地址

          data (Map): (可选) 要发送给服务器的数据,以key/value 的键值对形式表示.

          callback (Function): (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法).

          type (String): (可选) 官方的说明是: Type of data to be sent. 其实应该为客户端请求的类型(JOSN,XML,等等)

        说明:

          通过远程HTTP POST 请求载入信息.这个简单的POST请求功能以取代复杂$.ajax.请求成功时可调用回调函数.

        讲解:

          具体用法和get相同,只是提交方式由"GET"改为"POST".

      6.jQuery.ajax( options )

        作用:

          通过HTTP请求加载远程数据

        说明:

          通过HTTP请求加载远程数据.jQuery底层AJAX实现.简单易用的高层实现为$.get,$.post等.

          $.ajax() 返回其创建的XMLHttpRequest对象.大多数情况下你无需直接操作该对象,但特殊情况下可用于手动终止请求.

          $.ajax() 只有一个参数: 参数 key/value 对象, 包含各配置及回调函数信息.

        讲解:

          这是jQuery中Ajax的核心函数,上面所有的发送Ajax请求的函数内部最后都会调用此函数.options参数支持很多参数,使用这些参数可以完全控制ajax请求.

    options参数列表
    参数名 类型 描述
    url String (默认: 当前页地址) 发送请求的地址.
    type String (默认: "GET") 请求方式 ("POST" 或 "GET"), 默认为"GET".其它HTTP请求方法,如PUT 和 DELETE 也可以使用, 但仅部分浏览器支持.
    timeout Number 设置请求超时时间(毫秒).此设置将覆盖全局设置.
    async Boolean

    (默认: true) 默认设置下, 所有请求均为异步请求. 如果需要发送同步请求, 请将此选项设置为false.注意,

    同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行.

    beforeSend Function 发送请求前可修改XMLHttpRequest对象的函数,如添加自定义HTTP头.XMLHttpRequest 对象是唯一的参数.
    cache Boolean (默认: true) jQuery 1.4 新功能,设置为false 将不会从浏览器缓存中加载请求信息.
    complete Function 请求完成后回调函数 (请求成功或失败时均调用). 参数: XMLHttpRequest 对象,成功信息字符串.
    contentType String (默认: "application/x-www-form-urlencoded") 发送信息至服务器时内容编码类型.默认值适合大多数应用场合.
    data

    Object,

    String

    发送到服务器的数据.将自动转换为请求字符串格式.GET请求中将附加在URL 后.查看processDate 选项说明以禁止此自动转换.

    必须为Key/Value格式.如果为数组,jQuery将自动为不同值对应同一个名称.

    dataType String

    预期服务器返回的数据类型.如果不指定,jQuery将自动根据HTTP包MIME信息返回responseXML 或 responseText, 并作为回调函数参数

    传递,可用值:

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

    "html":返回纯文本HTML信息:包含script元素.

    "script":返回纯文本JavaScript代码.不会自动缓存结果.

    "json":返回JSON数据.

    "jsonp":JSONP格式.

    error Function (默认: 自动判断 (xml 或 html)) 请求失败时将调用此方法.这个方法有三个参数:XMLHttpRequest对象,错误信息,(可能)捕捉的错误对象.
    global Boolean (默认: true) 是否触发全局 AJAX事件.设置为false将不会触发全局AJAX事件,如ajaxStart或ajaxStop.可用于控制不同的Ajax事件.
    ifModified Boolean (默认: false) 仅在服务器数据改变时获取新数据.使用HTTP包Last-Modified头信息判断.
    processData Boolean

    (默认: true) 默认情况下,发送的数据将被转换为对象(技术上讲并非字符串)以配合默认内容类型"application/x-www-form-urlencoded".

    如果要发送DOM树信息或其它不希望转换的信息,请设置为false.

    success Function 请求成功回调函数.

    jQuery 的Ajax相关函数

      1.jQuery.ajax( options)

        说明:

          设置全局AJAX默认选项.

        讲解:

          有时我们希望设置页面上所有Ajax属性的默认行为.那么就可以使用此函数设置options选项,此后所有的Ajax请求的默认options将被更改.

      2.全局Ajax事件

        在jQuery.ajaxSetup(options)中的options参数属性中,有一个global属性.详细如下:

          类型: 布尔值

          默认值: true

          说明: 是否触发全局的Ajax事件

        这个属性用来设置是否触发全局的Ajax事件,全局Ajax事件是一系列伴随Ajax请求发生的事件.主要事件如下:

    主要事件
    名称 说明
    ajaxComplete( callback ) AJAX 请求完成时执行函数
    ajaxError( callback ) AJAX 请求发生错误时执行函数
    ajaxSend( callback ) AJAX 请求发送前执行函数
    ajaxStart( callback ) AJAX 请求开始时执行函数
    ajaxStop( callback ) AJAX 请求结束时执行函数
    ajaxSuccess( callback ) AJAX 请求成功时执行函数
  • 相关阅读:
    P2617 Dynamic Rankings[带修主席树(模板)]
    P2617 Dynamic Rankings[带修主席树(模板)]
    P4127 [AHOI2009]同类分布
    P4127 [AHOI2009]同类分布
    P4550 收集邮票 [期望dp]
    P4550 收集邮票 [期望dp]
    P3168 [CQOI2015]任务查询系统
    蓝桥杯 2的次幂表示 递归
    蓝桥杯 最大的算式 dp
    蓝桥杯 未名湖边的烦恼 递推 dp
  • 原文地址:https://www.cnblogs.com/double405/p/5169663.html
Copyright © 2011-2022 走看看