使用jQuery实现Ajax
通过JavaScript书写AJAX方法相应的比较复杂,还要考虑到浏览器的兼容性等一系列问题.而JQuery中已经将AJAX相关的操作进行了封装,使用时只需要在合适的地方调用AJAX相关的方法即可,相比而言,JQuery实现AJAX更加简洁,方便.
$.ajax()
$.ajax()可以通过发送HTTP请求加载远程数据,是jQuery最底层的AJAX的实现,具有较高灵活性:
语法:
$.ajax([设置参数]);
常用设置参数如下:
参 数说 明String url发送请求的地址,默认为当前页地址String type请求方式(POST或者GET,默认为GET)Number timeout设置请求超时时间Object data 或 String data发送到服务器的数据String dataType预期服务器返回的数据类型,可用类型有:XML,HTML,Script,JSON,JSONP,Textfunction beforeSend(XMLHttpRequest xhr)发送请求前调用的函数参数xhr,可选, XMLHttpRequest对象function complete(XMLHttpRequest xhr,String ts)请求完成后调用的函数(请求成功或失败时均调用)参数: xhr,可选, XMLHttpRequest对象, ts可选,描述请求类型的字符串function success(Object result,String ts)请求成功后调用的函数参数result:可选,由服务器返回的数据参数ts可选,描述请求类型的字符串function error(XMLHttpRequest xhr,String em,Exception e)请求失败时调用的函数参数: xhr,可选, XMLHttpRequest对象, 参数em可选,错误信息参数e:可选 ,捕获的异常对象boolean global默认为true,表示是否触发全局的AJAX事件
<%@ page language="java" pageEncoding="UTF-8"%>
$(function(){
$("#btn").click(function(){
$.ajax({
url:getPath()+"/AServlet",
type:"GET",
data:"name=张三",
dataType:"text",
success:function(data){
alert(data);
}
});
});
});
function getPath(){
var path = location.href;
var pname = location.pathname;
var index = path.indexOf(pname);
var projectName =pname.substring(0,pname.indexOf("/", 1));
return path.substring(0,index)+projectName+"/";
}
Servlet:
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/AServlet")
public class AServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
request.setCharacterEncoding("UTF-8");
String name = request.getParameter("name");
response.getWriter().print("hello:"+name);
}
}
运行结果:
$.get()
$.get()方法是JQuery封装的发送HTTP GET请求从服务器加载数据的AJAX方法,具体语法如下:
$.get(url,data,success(resp,status,xhr),dataType)
参数说明:
参 数说 明String url必选,规定将请求发送到呢个urlObject data 或 String data可选,规定发送给服务器的数据function success(Object result,String status,XMLHttpRequest xhr)可选,请求成功后调用的函数:参数result:可选,服务器返回的结果参数status:可选,请求的状态参数xhr: 可选,XMLHttpRequest对象String dataType预期服务器返回的数据类型,可用类型有:XML,HTML,Script,JSON,JSONP,Text
把$.ajax()的ajax请求修改为$.get()
$.post()
$.post()是jQuery封装的发送HTTP POST请求从服务器加载数据的AJAX方法,语法如下:
$.post(url,data,success(resp,status,xhr),dataType);
参 数说 明String url必选,规定将请求发送到呢个urlObject data 或 String data可选,规定发送给服务器的数据function success(Object result,String status,XMLHttpRequest xhr)可选,请求成功后调用的函数:参数result:可选,服务器返回的结果参数status:可选,请求的状态参数xhr: 可选,XMLHttpRequest对象String dataType预期服务器返回的数据类型,可用类型有:XML,HTML,Script,JSON,JSONP,Text
文章链接
发表评论