简介
通过 HTTP 请求加载远程数据。
jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数，除非你需要操作不常用的选项，以获得更多的灵活性。
发送数据到服务器
默认情况下，Ajax请求使用GET方法。如果要使用POST方法，可以设定type参数值。这个选项也会影响data选项中的内容如何发送到服务器。
数据类型
（1）$.ajax()函数依赖服务器提供的信息来处理返回的数据。如果服务器报告说返回的数据是XML，那么返回的结果就可以用普通的XML方法或者jQuery的选择器来遍历。如果见得到其他类型，比如HTML，则数据就以文本形式来对待。
（2）通过dataType选项还可以指定其他不同数据处理方式。除了单纯的XML，还可以指定 html、json、jsonp、script或者text。
（3）和xml类型返回的数据不会经过处理。数据仅仅简单的将XMLHttpRequest的responseText或responseHTML属性传递给success回调函数，
（4）如果指定为html类型，任何内嵌的JavaScript都会在HTML作为一个字符串返回之前执行。类似的，指定script类型的话，也会先执行服务器端生成JavaScript，然后再把脚本作为一个文本数据返回。
（5）如果指定为json类型，则会把获取到的数据作为一个JavaScript对象来解析，并且把构建好的对象作为结果返回。
基本语法
封装属性
需要封装的属性包括：
类型：type
地址：url
是否同步：async
参数：data
请求数据类型：dataType
请求成功回调函数：success
请求失败回调：error
框架分析
属性说明常用的属性包括type、url、async、data、dataType、jsonp、success、errortype请求类型，取值包括：post/geturl请求连接地址async是否异步执行，取值包括：true/false(同步/异步)data请求的参数，格式：param=value¶m=valuedataType响应值类型，取值包括：xml/html/script/json/jsonp/textjsonp跨域请求时候，重置请求回调函数名称success/error响应成功需要执行的回调函数/相应失败需要执行的回调函数
简单应用
客户端
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title
</title>
<script src="jquery-3.2.1.min.js"></script>
</head>
<body>
<script>
$(document).ready(function () {
var data = {
type:"get",
url:"Servlet",
async:true,
data:"name=cgt&psd=123",
dateType:"json",
success:function (data) {
console.log("收到数据:"+data);
},
error:function () {
console.log("出问题了");
}
};
$.ajax(data);
})
</script>
</body>
</html>
服务器端
package com.test.servlet;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
/**
* Created by cgt on 2017/6/3.
*/
@WebServlet(
"/Servlet")
public class Servlet extends HttpServlet {
@Override
public void init()
throws ServletException {
System.out.println(
"成功连接到Servlet");
}
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
System.out.println(
"doGet");
resp.setCharacterEncoding(
"UTF-8");
resp.getWriter().write(
"已成功以GET方法连接");
String name = req.getParameter(
"name");
String psd = req.getParameter(
"psd");
System.out.println(
"name="+name);
System.out.println(
"psd="+psd);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
System.out.println(
"doPost");
resp.setCharacterEncoding(
"UTF-8");
resp.getWriter().write(
"已成功以POST方法连接");
String name = req.getParameter(
"name");
String psd = req.getParameter(
"psd");
System.out.println(
"name="+name);
System.out.println(
"psd="+psd);
}
}
运行结果
客户端
服务器端
原生AJAX
可以参考我的另一篇博客——AJAX http://blog.csdn.net/iamcgt/article/details/72857872
IntelliJ IDEA部署Servlet
可以参考我的另一篇博客——IntelliJ IDEA部署Servlet http://blog.csdn.net/iamcgt/article/details/72851756
IntelliJ IDEA配置Tomcat
可以参考我的另一篇博客——IntelliJ IDEA配置Tomcat http://blog.csdn.net/iamcgt/article/details/72848187
