1. 技术文章
  2. 六、jQuery与Ajax的应用

六、jQuery与Ajax的应用

由 六月ゝ 毕业季﹏ 提交于 2019-11-29 12:28:25

Ajax全称为"Asynchronous JavaScript and XML"（异步JavaScript和XML），它并不是指一种单一的技术，而是有机地利用了一系列交互式网页应用相关的技术所形成的结合体。它的出现，揭开了无刷新更新页面的新时代，并有代替传统的web方式和通过隐藏的框架来进行异步提交的趋势，是web开发应用的一个里程碑。

jQuery中的Ajax

jQuery对Ajax操作进行了封装，在jQuery中$.ajax()方法属于最底层的方法，第2层是load()、$.get()和$.post()方法，第3层是$.getScript()和$.getJSON()方法。

一、load()方法

1、载入HTML文档

load()方法是jQuery中最为简单和常用的Ajax方法，能载入远程HTML代码并插入DOM中。结构为，load(url,[data],callback)

url:类型为string  请求HTML页面的URL地址。

data：可选  类型为 Object  发送至服务器的key/value数据

callback：可选 类型为Function 请求完成时间的回调函数，无论请求成功或失败

$("#resText").load("test.html");

2、帅选载入的HTMl文档

如果只需要加载某个页面的某些元素，那么可以使用load()方法的URL参数来达到目的。通过为URL参数指定选择符，就可以很方便地从加载过来的HTML文档里帅选出所需要的内容。

load()方法的URL参数的语法结构为："url selector"。注意，url和选择器之间有一个空格。

例如

$("#resText").load("test.html .para");

3、传递方式

load()方法的传递方式根据参数data来自动指定。如果没有参数传递，则此采用GET方式传递。反之，则会自动转为POST方式。

//有参数传递，则是POST方式
$("resText").load("text.html",{name:"wang",age:"22"},function(){.....}); 
//无参数传递，则是GET方式
$("resText").load("text.html",function(){});

4、回调函数

对于必须加载完成后才能继续的操作，load()方法提供了回调函数(callback)，该函数有3个参数，分别代表请求返回的内容、请求的状态和XMLHttpRequest对象，

$("#resText").load("text.html",function(responseText,textStatus,XMLHttpRequest){
    //responseText  返回内容
    //textStatu  请求状态:success、error、notmodified、timeout4中
    //XMLHttpRquest :XMLHttpRequest对象
});

在load()方法中无论AJax请求是否成功，只要当请求完成后，回调函数就会触发。

二、$.get()方法和$.post()方法

load()方法通常用来从web服务器上获取静态的数据文件，然而这并不能体现Ajax的全部价值。在项目中，如果需要传递一些参数给服务器中的页面，那么可以使用$.get()或者$.post()方法或者是$.ajax()方法。

1、$.get()方法

$.get()方法使用GET方式来进行异步请求。它的结构为：

$.get(url,[data],[callback],[type])

url:请求的html页的url地址

data：Object 发送至服务器的key/value数据会作为QueryString 附加请求url中

callback:function 载入成功时回调函数(只有当response的返回状态是succes才调用该方法)自动将请求结果和状态传递给该方法。

type：string服务器端返回内容的格式，包括xml、html、script、json、text和_default

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
 <%
  String path=request.getContextPath();
 %>
<!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>
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" >
 $(function(){
  $("#send").click(function(){
   $.get("<%=path%>/testServlet.do",{
    username:$("#username").val(),
    content:$("#content").val()
   },function(data){
    //回调函数
    $("#resText").html(data);
   
   },"html");
  });
  
 });
</script>
</head>
<body>
<form id="form1" action="#">
     <p>评论：</p>
        <p>姓名：<input type="text" name="username" id="username"  /></p>
        <p>内容：<textarea name="content" id="content" rows="2" cols="20" >
        </textarea></p>
        <p><input type="button" id="send" value="提交"  /></p>
    </form>
    <div class="comment">已有评论：</div>
    <div id="resText"></div>
</body>
</html>

java后台：

package com.edu.servlet;
import java.io.IOException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class TestServlet extends HttpServlet{
 private static final long serialVersionUID = 1L;
 public void doPost(HttpServletRequest request,HttpServletResponse response){
  String username=request.getParameter("username");
  String content=request.getParameter("content");
  try {
  //这里返回的是html
   response.getWriter().write("<div>"+username+":"+content+"</div>");
  } catch (IOException e) {
   // TODO Auto-generated catch block
   e.printStackTrace();
  }
 }
 
 public void doGet(HttpServletRequest request,HttpServletResponse response){
  this.doPost(request, response);
 }
}

2、json文件

之所以会出现这种数据格式的文件，很大程度上时因为xml文档体积大和难以解析。json文件和xml文件一样，也可以方便的被重用。而且json文件非常简洁，也容易阅读。

由于服务端返回的数据格式是json文件，因此需要对返回的数据进行处理之后，才可以将新的html数据添加到主页面中。

3、$.post()方法

它和$.get()方法的结构和使用方式都相同，不过他们之间仍然有以下区别：

①get请求会将参数跟在url后进行传递，而post请求则是http消息的实体内容发送给web服务器。当然，在ajax请求中，这种区别对用户是不可见的。

②get方式对传输的数据有大小限制(通常不能大于2kb)，而使用post方式传递的数据量要比get方式大的多(理论上不受限制)。

③get方式请求的数据会被浏览器缓存起来，因此其他人就可以从浏览器的历史记录读取到这些数据，例如账号和密码等。在这种情况下，get方式会带来严重的安全性问题，而post方式相对来说就可以避免这些问题。

三、$.getScript()方法和$.getJson()方法

1、$.getScript()方法

有时候，在页面初次加载时就取得所需的全部Javascript文件是完全没有必要的。可以在需要哪个Javascript文件时，动态的创建<script>标签，

例如

$(document.createElement("script")).attr("src","test.js").appendTo("head");

或者

$("<script type="text/javascript" src='text.js'></script>").appendTo("head");;

但是这种方式并不理想。为此，jQuery提供了$.getScript()方法来直接加载js文件，与加载一个html片段一样简单方便，并且不需要对Javascript文件进行处理，Javascript文件会自动执行。

$("test.js",function(){
//回调函数
});

2、$.getJSON()方法

$.getJSON("text.json",function(){
//回电函数，处理json数据
});

四、$.ajax()方法

$.ajax()方法是jQuery最底层的Ajax实现

$.ajax(options)

该方法只有1个参数，但在这个对象里包含了$.ajax()方法所需要的请求设置以及回调函数等信息，参数以key/value的形式存在，所有参数都是可选的。

参数名称 类型 说明
url String 发送的请求地址
type string 请求方式：post\get\put\delete默认为get
timeout Number 设置请求超时时间(ms).此设置将覆盖$.ajaxSetup()方法的全局设置。
data Object或String 发送到服务器的数据，如果已经不是字符串，将自动转换为字符串格式。
dataType String 预期服务器返回的数据类型。xml、html、script、json、jsonp、text
beforeSend Function 发送请求前可以修改XMLHttpRequest对象的函数
complete Function 请求完成后调用的回调函数
success Function

请求成功后调用的回调函数有两个参数

①有服务器返回，并根据dataType参数进行处理后的数据。

②描述状态的字符串

function(data,textStatus){

}
error Function

请求失败时被调用的函数。该函数有3个参数，XMLHttpRequest对象、错误信息、捕获的错误对象。

function(XMLHttpRequest,textStatus,errorThrown){

}
global Boolean 默认为true。表示是否触发全局AJax事件，

前面用到的load()方法、$.get()、$.post()、$.getScript()、$.getJson()方法，都是基于$.ajax()方法构建的。$.ajax是jQuery最底层的ajax实现，因此可以用它来代替前面的所有方法。

//简单用户登录
$(function(){
  $(".login-btn").click(function(){
   $.ajax({
    url:'<%=path%>/testServlet.do',
    type:'post',
    data:{username:$('#username').val(),content:$('#content').val()},
    dataType:'json',
    success:function(data){
     alert(data.username);
    }
   });
   
  });
  
 });
//java后台
public void doPost(HttpServletRequest request,HttpServletResponse response){
  Person p=new Person();
  p.setUsername("wangning");
  //ObjectMapper objctMapper=new ObjectMapper();
          // ObjectMapper mapper=new ObjectMapper();
  JSONObject object=JSONObject.fromObject(p);
           try {
   //String json=mapper.writeValueAsString(p);
   response.getWriter().write(object.toString());
  } catch (Exception e) {
   // TODO Auto-generated catch block
   e.printStackTrace();
  }
           
 
 }

 

五、序列化元素

1、serialize()

做项目的时候，表单时必不可少的.常规的方法是使表单提交到另一个页面，整个浏览器都会被刷新，而使用AJax技术则能够异步地提交表单，并将服务器返回的数据显示在当前页面中。前面如果要传入data参数，则需要将字段的值逐个添加到data参数中。

{
username;$("#username").val(),
content:$("#content").val()
}

 这种方式在只有少量字段的表单中，勉强还可以使用，但如果表单元素越来越复杂使用这种方式在增大工作量的同时，也使表单缺乏弹性。jQuery为这一常用的操作提供了一个简化的方法-----serialize()方法。与 jquery中其他方法一样，serialize()方法也是作用于一个jQuery对象，它能够将DOM元素内容序列化字符串，用于ajax请求。

将上面的例子改成

//简单用户登录

$(function(){

  $(".login-btn").click(function(){

   $.ajax({

    url:'<%=path%>/testServlet.do',

    type:'post',

    data:$("#form1").serialize(),
    dataType:'json',

    success:function(data){

     alert(data.username);

    }

   });

   

  });

  

 });

 也可以使用字符串方式，例如

"username="+encodeURIComponent($("#username").val())+"$content="+encodeURIComponent($("#content").val())

用字符串方式时，需要注意对字符编码(中文问题)，如果不希望编码带来麻烦，可以使用serialize()方法，他会自动编码。

2、serialize()方法不仅作用于表单上，其他选择器选取的元素也都能使用它，

$(":checkbox,:radio").serialize()

 把复选框和单选框的值序列化为字符串形式，只会将选中的值序列化。

3、serializeArray()方法

在jQuery中还有一个与serialize()方法类似的方法---serializeArray(),该方法不是返回字符串，而是将DOM元素序列化后，返回json格式的数据。

4、$.param()方法

它是serialize()方法的核心，用来对一个数组或对象按照key/value进行序列化。比如将一个普通的对象序列化

var obj={a:1,b:2,c:3};
var k=$.param(obj);
alert(k); //输出a=1&b=2&c=3

 六、jQuery中的ajax全局事件

jQuery简化Ajax操作不仅体现在调用AJax方法和处理响应方面，而且还体现在对调用Ajax方法的过程中的HTTP请求的控制。通过jQuery提供了一些自定义全局函数，能够为各种与Ajax相关的事件注册回调函数。例如当AJax请求开始时，会触发ajaxStart()方法的回调函数。当Ajax请求结束时，会触发ajaxStop()方法的回调函数。这些方法都是全局的方法，因此无论创建他们的代码位于何处，只要有Ajax请求发生时，就会触发他们。

例如为网页添加提示信息：“加载中....”

 <div id="loading">加载中...</div>
//jquery代码
$(function(){
$("#loading").hide();
$("#loading").ajaxStart(function(){
    $(this).show();
});
$("#loading").ajaxStop(function(){
    $(this).hide();
});
});

 使用Css控制元素隐藏，当AJax请求开始的时候，将此元素显示出来，用来提示用户Ajax请求正在进行。当AJax请求结束时，将此元素隐藏。如果在此页面中的其他地方使用Ajax，该提示信仍然有效，因为它是全局的。jQuery的Ajax全局事件中还有几个方法，也可以在使用Ajax方法的过程中为其带来方便。

方法名称 说明
ajaxStart(callback) Ajax请求开始时执行的函数
ajaxStop(callback) Ajax请求结束时执行的函数
ajaxComplete(callback) Ajax请求完成时执行的函数
ajaxError(callback) AJax请求发生错误时执行的函数，捕捉到的错误可以作为最后一个参数传递
ajaxSend(callback) Ajax请求发送前执行的函数
ajaxSuccess(callback) Ajax请求成功时执行的函数

如果想使某个AJax请求不受全局方法的影响，那么可以在使用$.ajax()方法时，将参数中的global设置为false，

$.ajax({
url:"test.html",
global:false  //不触发全局ajax事件
});

标签
ajax
回调函数
jquery
jquery事件
html代码
string
content
callback
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!