jQuery中的ajax常用方法及实例

程序员文章站 2022-10-17 23:04:17

jquery,ajax,$.get(),$.post,$.ajax() ......

JQuery中的ajax（常用方法及实例）

jquery对Ajax操作进行了封装，在JQuery中，$.ajax()方法属于最底层的方法，第二层为$.load（）、$.get（）、$.post（），其中$.get ( ) 和$.post ( )是最为常用的，在这里为首要介绍。

JQuery中的 $.get() 方法详解：

$.get()方法使用 GET 方式来进行异步请求。

它的结构为： $.get( url , [data] , [ callback ] , [ type ])

$.get() 方法参数介绍
参数名称	类型	说明
url	String	请求目的地的URL地址
data（可选）	object	要发送至目的地的数据，建议使用key/value的形式，数据会附加到请求的URL中
callback（可选）	function	调用ajax后的回调函数（当Response的回复状态为success时才调用），服务端返回的状态和数据会传递给该方法
type（可选）	String	服务器返回内容的格式，包括html，xml，script，json，text，_default，scrip等

在此特殊介绍一下 callback 这个参数

callback 一般的书写格式为

function（data，textStatus）

{

//data : 为服务器返回的具体数据

// textStatus: 服务器返回的请求状态，共有：success（常见），error（常见），notmodified，timeout四种

}

$.get()的一般使用格式：

 1 $("#send").click(function(){
 2          $.get(
 3                   "servlet/php",//请求的服务器地址
 4                   { 
 5                       "username": value,
 6                       "content":value        
 7                   },      //  Json方式传递请求数据
 8                    function（data,textStatus）{
 9  
10                           //具体回调内容（对data的处理）
11                     }，
12                   “text”
13                  )
14 })

同时 $.get() 方法在一些小数据传输中（不计较安全性）可以简用为

$.get ( " servlet?key=value " )

JQuery中的 $.post()方法详解：

$.post()方法使用 POST 方式来进行异步请求。

它的结构为： $.post( url , [data] , [ callback ] , [ type ])

$.post() 方法参数介绍
参数名称	类型	说明
url	String	请求目的地的URL地址
data（可选）	object	要发送至目的地的数据，建议使用key/value的形式，数据不会附加到请求的URL中
callback（可选）	function	调用ajax后的回调函数（当Response的回复状态为success时才调用），服务端返回的状态和数据会传递给该方法
type（可选）	String	服务器返回内容的格式，包括html，xml，script，json，text，_default，scrip等

在此特殊介绍一下 callback 这个参数

callback 一般的书写格式为

function（data，textStatus）

{

//data : 为服务器返回的具体数据

// textStatus: 服务器返回的请求状态，共有：success（常见），error（常见），notmodified，timeout四种

}

$.post()的一般使用格式：

 1 $("#send").click(function(){
 2            $.post(
 3                     "servlet/php",//请求的服务器地址
 4                     { 
 5                         "username": value,
 6                         "content":value        
 7                     },      //  Json方式传递请求数据
 8                      function（data,textStatus）{
 9    
10                            //具体回调内容（对data的处理）
11                      }，
12                    “text”
13                   )
14  })

$.get()与$.post()方法的比较

1.GET请求会将参数跟在URL中进行传递，而POST请求则是将内容作为HTTP消息的实体内容发送给WEB服务器。

2.GET请求在数据传输量上有大小限制（通常不大于2KB），而POST请求则几乎不受限制（理论上）

3.GET请求的数据会在服务器的缓存中缓存起来，因此可以从浏览历史记录中读取这些数据，因此GET存在严重的安全性问题，而POST则不会

通常在使用中尽量优先选择post方式

具体基于javaWeb的servlet的ajax实例（post方式）：

html（含ajax）部分代码

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
    <div>
      <div>
        <input type="text" name="texts" />
      </div>
      <textarea class="content"></textarea>
    </div>
    <script tyep="text/javascript">
      $(function(){
          $("input[name=texts]").keyup(function(){
             $string =  $("input[name=texts]").val();
             $.post("Ajaxtext",
                   {"name": $string},
                   function(data,textStatus){
                      $(".content").html(textStatus+data); 
                   },
              "text"
             );
          });
          
      })
    
    </script>
</body>
</html>

servlet部分代码

@WebServlet("/Ajaxtext")
public class Ajaxtext extends HttpServlet {
    private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public Ajaxtext() {
        super();
        // TODO Auto-generated constructor stub
    }

    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        String s = request.getParameter("name");
        response.getWriter().append(s);
    }

    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        doGet(request, response);
    }

}

JQuery中的ajax（）方法（jquery中ajax的核心、最底层方法）

$.ajax() 方法是jquery 中最底层的ajax实现，post（）和get（）方法都是由它为基础封装而来。

它的结构为： $ajax ( options ) ,

其中options 这个参数包含了ajax方法所需要的所有请求设置及回调函数等信息，参数以key/value的形式存在，所有参数可选，常用参数如下图：

$.ajax()参数详解
参数名称	描述
async	布尔值，表示请求是否异步处理。默认是 true。
beforeSend(xhr)	发送请求前运行的函数。
cache	布尔值，表示浏览器是否缓存被请求页面。默认是 true。
complete(xhr,status)	请求完成时运行的函数（在请求成功或失败之后均调用，即在 success 和 error 函数之后）。
contentType	发送数据到服务器时所使用的内容类型。默认是："application/x-www-form-urlencoded"。
context	为所有 AJAX 相关的回调函数规定 "this" 值。
data	规定要发送到服务器的数据。
dataFilter(data,type)	用于处理 XMLHttpRequest 原始响应数据的函数。
dataType	预期的服务器响应的数据类型。
error(xhr,status,error)	如果请求失败要运行的函数。
global	布尔值，规定是否为请求触发全局 AJAX 事件处理程序。默认是 true。
ifModified	布尔值，规定是否仅在最后一次请求以来响应发生改变时才请求成功。默认是 false。
jsonp	在一个 jsonp 中重写回调函数的字符串。
jsonpCallback	在一个 jsonp 中规定回调函数的名称。
password	规定在 HTTP 访问认证请求中使用的密码。
processData	布尔值，规定通过请求发送的数据是否转换为查询字符串。默认是 true。
scriptCharset	规定请求的字符集。
success(result,status,xhr)	当请求成功时运行的函数。
timeout	设置本地的请求超时时间（以毫秒计）。
traditional	布尔值，规定是否使用参数序列化的传统样式。
type	规定请求的类型（GET 或 POST）。
url	规定发送请求的 URL。默认是当前页面。
username	规定在 HTTP 访问认证请求中使用的用户名。
xhr	用于创建 XMLHttpRequest 对象的函数。

jQuery中的ajax常用方法及实例

jQuery中each遍历的三种方法实例分析

jQuery加载及解析XML文件的方法实例分析

jQuery中ajax - post() 方法实例详解

JQuery ajax中error返回错误及一直返回error的解答

jQuery中ajax - get() 方法实例详解

Python面向对象程序设计中类的定义、实例化、封装及私有变量/方法详解

在jquery中的ajax方法怎样通过JSONP进行远程调用

jquery中animate的stop()方法作用实例教程分析

jquery中one()方法的用法实例教程

Jquery中ajax方法data参数的用法小结