6、jQuery与Ajax的应用

时间 2019-11-05

标签 jquery ajax 应用栏目 JQuery 繁體版

原文原文链接

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

jQuery中的Ajaxhtml

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

1、load()方法jquery

一、载入HTML文档web

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

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

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

callback：可选类型为Function 请求完成时间的回调函数，不管请求成功或失败浏览器

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

二、帅选载入的HTMl文档缓存

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

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

例如

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

三、传递方式

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

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

四、回调函数

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

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

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

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

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

一、$.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);
 }
}

二、json文件

之因此会出现这种数据格式的文件，很大程度上时由于xml文档体积大和难以解析。json文件和xml文件同样，也能够方便的被重用。并且json文件很是简洁，也容易阅读。

因为服务端返回的数据格式是json文件，所以须要对返回的数据进行处理以后，才能够将新的html数据添加到主页面中。

三、$.post()方法

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

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

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

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

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

一、$.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(){
//回调函数
});

二、$.getJSON()方法

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

4、$.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();
  }
           
 
 }

5、序列化元素

一、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()方法，他会自动编码。

二、serialize()方法不只做用于表单上，其余选择器选取的元素也都能使用它，

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

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

三、serializeArray()方法

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

四、$.param()方法

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

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

6、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事件
});