欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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