ideahtml调用jquery函数失败_[WEB篇]-JQuery-06-Jquery实现异步调用

JQuery

Jquery实现异步调用

通过 HTTP 请求加载远程数据

JQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数，除非你需要操作不常用的选项，以获得更多的灵活性。

最简单的情况下，$.ajax()可以不带任何参数直接使用。

注意，所有的选项都可以通过$.ajaxSetup()函数来全局设置。

回调函数

如果要处理$.ajax()得到的数据，则需要使用回调函数。beforeSend、error、dataFilter、success、complete。

beforeSend 在发送请求之前调用，并且传入一个XMLHttpRequest作为参数。
error 在请求出错时调用。传入XMLHttpRequest对象，描述错误类型的字符串以及一个异常对象（如果有的话）
dataFilter 在请求成功之后调用。传入返回的数据以及"dataType"参数的值。并且必须返回新的数据（可能是处理过的）传递给success回调函数。
success 当请求之后调用。传入返回后的数据，以及包含成功代码的字符串。
complete 当请求完成之后调用这个函数，无论成功或失败。传入XMLHttpRequest对象，以及一个包含成功或错误代码的字符串。
数据类型

$.ajax()函数依赖服务器提供的信息来处理返回的数据。如果服务器报告说返回的数据是XML，那么返回的结果就可以用普通的XML方法或者jQuery的选择器来遍历。如果见得到其他类型，比如HTML，则数据就以文本形式来对待。

通过dataType选项还可以指定其他不同数据处理方式。除了单纯的XML，还可以指定 html、json、jsonp、script或者text。

其中，text和xml类型返回的数据不会经过处理。数据仅仅简单的将XMLHttpRequest的responseText或responseHTML属性传递给success回调函数，

'''注意'''，我们必须确保网页服务器报告的MIME类型与我们选择的dataType所匹配。比如说，XML的话，服务器端就必须声明 text/xml 或者 application/xml 来获得一致的结果。

如果指定为html类型，任何内嵌的JavaScript都会在HTML作为一个字符串返回之前执行。类似的，指定script类型的话，也会先执行服务器端生成JavaScript，然后再把脚本作为一个文本数据返回。

如果指定为json类型，则会把获取到的数据作为一个JavaScript对象来解析，并且把构建好的对象作为结果返回。为了实现这个目的，他首先尝试使用JSON.parse()。如果浏览器不支持，则使用一个函数来构建。JSON数据是一种能很方便通过JavaScript解析的结构化数据。如果获取的数据文件存放在远程服务器上（域名不同，也就是跨域获取数据），则需要使用jsonp类型。使用这种类型的话，会创建一个查询字符串参数 callback=? ，这个参数会加在请求的URL后面。服务器端应当在JSON数据前加上回调函数名，以便完成一个有效的JSONP请求。如果要指定回调函数的参数名来取代默认的callback，可以通过设置$.ajax()的jsonp参数。

案例分析：Jquery结合Ajax的使用

在指定的文件目录中导入jquery相关jar包：jquery-1.8.2.min.js

代码分析：

AjaxJqueryServlet.java：

/*** Jquery结合Ajax的使用*/
@WebServlet("/AjaxJqueryServlet")
public class AjaxJqueryServlet extends HttpServlet {protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {response.setContentType("text/html;charset=UTF-8");PrintWriter pw = response.getWriter();String p1 = request.getParameter("p1");String p2 = request.getParameter("p2");pw.write("服务器响应请求...获取参数："+p1+"-"+p2);pw.flush();pw.close();}protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {doGet(request, response);}
}

测试jsp1：jquery1.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<!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>1.jquery结合Ajax的使用</title>
</head>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.8.2.min.js" ></script><body><div id="guigu"></div><input type="button" value="测试服务器" id="btn"/><script type="text/javascript">/*** AjaxJqueryServlet需要处理客户端请求并响应数据发送到客户端*/// 点击按钮触发事件$("#btn").click(function(){var param = {p1:"hello",p2:"ajax and jquery"};// 利用jquery的ajax实现简化操作$.ajax({type:"POST", // 请求方式url:"AjaxJqueryServlet", // 请求地址data:param, //向服务器传递的数据success:function(returnData){/*** success成功：由客户端传递数据到服务器，并且服务器响应完成后* 传递数据到客户端，全部正确执行* 等价于Ajax实现案例中步骤4的两步判断* if(XMLHttpReq.readyState==4){*      if(XMLHttpReq.status==200){*          ......处理数据*         }* }* returnData是将服务器传递的数据自动封装* eg:var xmlDoc = XMLHttpReq.responseXML;*/// 将数据在页面进行显示$("#guigu").html(returnData);}});});</script></body>
</html>

测试jsp：jquery2.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<!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>1.jquery结合Ajax的使用</title>
</head>
<script type="text/javascript"src="${pageContext.request.contextPath }/js/jquery-1.8.2.min.js"></script>
<body><div id="guigu"></div><input type="button" value="测试服务器" id="btn" /><script type="text/javascript">/*** AjaxJqueryServlet需要处理客户端请求并响应数据发送到客户端*/// 点击按钮触发事件$("#btn").click(function() {// 定义参数var param = {p1 : "hello",p2 : "ajax and jquery i am post"};// 利用jquery的ajax实现简化操作：可以通过调用明确的post或get方法/*** $.post("url",param,function(returnData){*        响应服务器返回的数据...* })*/$.post("AjaxJqueryServlet", param, function(returnData) {$("#guigu").html(returnData);});});</script>
</body>
</html>

结果展示：

访问资源http://localhost:8080/JavaWeb_Ajax/jquery1.jsp，结果显示如下所示

访问资源http://localhost:8080/JavaWeb_Ajax/jquery2.jsp，结果显示如下所示