现在的位置: 网页制作教程网站制作教程 >正文
JavaScript脚本

jquery的异步请求ajax介绍

发表于2018/7/24 网站制作教程 0条评论 ⁄ 热度 2,410℃

ajax可以实现异步请求,结合jquery使用,使浏览器地址栏不改变,进行局部刷新。

ajax功能请求流程图:

ajax流程图

Query的ajax主要有如下请求方式:

1.$.ajax(url,[settings])

2.load(url,[data],[callback])

3.$.get(url,[data],[fn],[type])

4.$.getJSON(url,[data],[fn])

5.$.getScript(url,[callback])

6.$.post(url,[data],[fn],[type])

$.ajax(...)最底层ajax请求,编写最复杂,完成功能最全的。

load()、$.get()、$.post()开发中常用3个。

$.getJSON()、$.getScript()高级开发。

$.getJSON() 可以完成js“跨域”请求,域名:域名+端口+项目,js默认不能跨域请求。

$.getScript() 动态加载js文件。之前使用<script src="">加载页面时,一并加载js文件。

load()实例

//0.2 请求参数,采用json
var params = {"username":"杰克", "password":"1234"};
/* 1 load()函数 ,必须使用jquery对象
* * 格式:load(url, [data], [callback])
*      参数1:url ,请求路径
*      参数2:data,请求参数
*      参数3:callback,回调函数
* * 如果没有请求参数,发送的GET请求
* * 如果有请求参数,发送的POST请求。请求没有中文乱码
* * 回调函数的参数
*   参数1:data,响应数据。load()永远获得字符串,如果需要使用,必须手动转换json对象。
*/
$(this).load(url,params,function(data){
  //转换json对象
  var jsonData = eval("("+data+")");
  alert(jsonData.message);
});

$.get()实例

/* 2 $.get() 全局函数,发送get请求
* * 格式:jQuery.get(url, [data], [callback], [type])
*      * 参数4:type ,返回内容格式,xml, html, script, json, text, _default。
* * GET请求不适合发送中文数据,存放请求的中文乱码。
*      必须手动解码   new String(username.getBytes("ISO-8859-1") ,"UTF-8")
* * 响应数据,如果使用  application/json;charset=UTF-8 ,jQuery自动将数据转换json对象。
* * 响应数据,如果使用  text/html;charset=UTF-8 ,回调函数获得字符串数据,需要手动转换。
*      使用“参数4”,设置"json",jQuery将字符串 转换成 json对象
*/
$.get(url,params,function(data){
  alert(data);
},"json");

$.post()实例

/* 3 $.post() 全局函数,发送post请求
* * 格式:jQuery.post(url, [data], [callback], [type])
*/
$.post(url,params,function(data){
  alert(data);
},"json")

$.ajax()实例

/* 4 $.ajax() 底层功能最强大的
  * * 格式:jQuery.ajax([settings])
  *   参数settings:设置所有的参数
  *   url:发送请求的地址
  *   data:发送到服务器的数据,请求参数
  *   type:请求方式 ("POST" 或 "GET"), 
  *   success:成功的回调函数,success(data, textStatus, jqXHR)
  *   error:请求失败时调用此函数
  *   dataType:预期服务器返回的数据类型
  *   "xml": 返回 XML 文档,可用 jQuery 处理。
  *   "html": 返回纯文本 HTML 信息;包含的script标签会在插入dom时执行。
  *   "script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了"cache"参数。'''注意:'''在远程请求时(不在同一个域下),所有POST请求都将转为GET请求。(因为将使用DOM的script标签来加载)
  *   "json": 返回 JSON 数据 。
  *   "jsonp": JSONP 格式。使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。
  *   "text": 返回纯文本字符串
*/
$.ajax({
  "url":url,
  "data":params,
  "type":"POST",
  "success":function(data){
    alert(data);
  },
  "error":function(){
    alert("服务器繁忙,请稍后重试");
  },
  "dataType":"json"
});

完整示例:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    lt;script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
    <script type="text/javascript">
      $(function(){
        $("input").click(function(){
          //请求的路径
          var url = "/javaee_jQuery_2/TestServlet"
          //请求的参数
          var params ={"username":"dly达达","password":"123"};
          /*
          load(url, [data], [callback])
          参数1:请求的服务器资源地址
          参数2:给请求的资源传递的参数
          参数3:当服务器返回响应数据时执行的回调函数
          不传参数使用的是get方式请求
          传参数,使用post方式请求,不会乱码
          回调函数的参数:第一个参数时用来接收服务器返回的数据
          第二个参数用来接收状态,success,error
          第三个参数接收一个对象,这个对象是ajax引擎 XHQ (XMLHttpRequest)
          使用load方法返回的都是json字符串
          $(this).load(url,params,function(data){
            //alert(data);
            //把json字符串转成对象
            var obj = eval("("+data+")");
            alert(obj.message);
          });
          jQuery.get(url, [data], [callback], [type])
          get方式请求服务器
          response.setContentType("text/html;charset=utf-8");返回的是json字符串
          response.setContentType("text/json;charset=utf-8");返回的是json对象
          第四个参数:type:返回内容格式,xml, html, script, json, text, _default。
          $.get(url,params,function(data){
            alert(data.message);
          },"json");
          $.post(url,params,function(data){
            alert(data.message);
          },"json");
          $.ajax(url,[settings]) 最底层的,功能最全的
          */
          jQuery.ajax({
            "url":url,
            "data":params,
            "type":"POST",
            "success":function(){alert("成功");},
            "error":function(){alert("服务器忙");},
            "dataType":"json"
          });
        });
      });
    </script>
   </head>
<body>
 <input type="button" value="发送ajax" />
</body>
</html>
  • 暂无评论