Ajax
Asynchronous JavaScript + XML（异步JavaScript和XML）, 其本身不是一种新技术，而是一个在 2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技术集合的‘新’方法，包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的
XMLHttpRequest。当使用结合了这些技术的AJAX模型以后， 网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面。这使得程序能够更快地回应用户的操作.尽管X在Ajax中代表XML, 但由于JSON的许多优势，比如更加轻量以及作为Javascript的一部分，目前JSON的使用比XML更加普遍。JSON和XML都被用于在Ajax模型中打包信息
1.原生的js方式
function fun()
{
//1.创建核心对象
var xhttp;
if (window.XMLHttpRequest)
{
//如果是高版本浏览器
xhttp = new XMLHttpRequest();
}
else
{
// code for IE6, IE5
//低版本浏览器
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//2.建立链接
xhttp.open("GET", "ajax?username=tom", true);
/**
参数1 请求方式
如果是post请求 则在send方法里面附带参数
否贼的话在 open的url后面附带参数
*请求的url
*/
//3.发送请求
xhttp.send();
//4.接受服务器的响应结果
xhttp.onreadystatechange=function()
{
//判断readystate的就绪状态是否是4 判断status的响应状态妈是否为200
if (xhttp.readyState==4 && xhttp.status==200)
{
var responseText=xhttp.responseText;
alert(responseText);
}
}
}
<input type="button" value="发送异步请求" onclick=fun()>
这里我改成POST请求 发送ajax请求 服务端没有收到数据 不知道为什么
服务端代码
@WebServlet("/ajax")
public class AjaxServlet extends HttpServlet {
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws IOException {
String username=req.getParameter("username");
System.out.println("username="+username);
resp.getWriter().write("hello,"+username);
}
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws IOException {
this.doPost(req, resp);
}
}
访问的结果如下
页面弹窗
2.Jquery的实现方式
当然首先要导入Jquery了
-
$.ajax()
-
语法:.$.ajax({键值对});
实例:
function jqueryAjax() { $.ajax({ //type默认是get url: "ajax", type: "POST", data: {"username":"jack","age":23}, success : function(data) { //响应成功自动执行function alert(data); }, error: function () { alert("ajax请求出错了!") }, //设置接收到的响应的数据的格式 如果不指定 会自动根据http头来设置 dataType : "text" }) } -
运行效果
-
-
$.get() :发送get请求
-
语法 $.get(url,[data],[callback],[type])
实例
function fun() { $.get("ajax",{username:"rose"},function (data) { alert(data); },"text"); } -
运行效果
-
-
$.post() :与上面的get一样
-
语法 $.post(url,[data],[callback],[type])
实例
function fun() { $.post("ajax",{username:"post"},function (data) { alert(data); },"text"); } -
运行效果
-
3.其中 几个参数的解释如下
-
Content-Type: 表示期望从后端接受到的数据的格式
-
application/json表示发送到后端的是序列化之后的json字符串 应该用@requestBody来接受
-
application/x-www-form-urlencoded 这种形式是没有办法将复杂的 JSON 组织成键值对形式(当然也有方案这点可以参考 ) ,你传进去可以发送请求，但是服务端收到数据为空， 因为 ajax 没有办法知道怎样处理这个数据。
-
application/x-www-form-urlencoded:
是常用的POST 提交数据的方式，普通的表单提交，或者js发包，如果不设置 content-type 属性，默认都是通过这种方式 -
application/json:
现在越来越多的人把它作为请求头，用来告诉服务端消息主体是序列化后的 JSON 字符串。application/json用来告诉服务端消息主体是序列化后的 JSON 字符串，JSON 格式支持比键值对复杂得多的结构化数据。 -
multipart/form-data
使用表单上传文件时，必须让 form 的 enctyped 等于multipart/form-data
-
-
Data-Type表示从后台接受到的数据类型
预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，比如 XML MIME 类型就被识别为 XML。在 1.4 中，JSON 就会生成一个 JavaScript 对象，而 script
则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后，传递给回调函数。可用值如下:-
”xml”: 返回 XML 文档，可用 jQuery 处理。
-
”html”: 返回纯文本 HTML 信息；包含的 script 标签会在插入 dom 时执行。
-
”script”: 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 “cache” 参数。注意：在远程请求时(不在同一个域下)，所有 POST 请求都将转为 GET 请求。（因为将使用 DOM 的 script标签来加载）
-
”json”: 返回 JSON 数据 。
如果指定为json类型，则会把获取到的数据作为一个JavaScript对象来解析，并且把构建好的对象作为结果返回。为了实现这个目的，他首先尝试使用JSON.parse()。如果浏览器不支持，则使用一个函数来构建。JSON数据是一种能很方便通过JavaScript解析的结构化数据。如果获取的数据文件存放在远程服务器上（域名不同，也就是跨域获取数据），则需要使用jsonp类型。使用这种类型的话，会创建一个查询字符串参数 callback=? ，这个参数会加在请求的URL后面。服务器端应当在JSON数据前加上回调函数名，以便完成一个有效的JSONP请求。如果要指定回调函数的参数名来取代默认的callback，可以通过设置$.ajax()的jsonp参数。
-
”jsonp”: JSONP 格式。使用 JSONP 形式调用函数时，如 “myurl?callback=?” jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
-
”text”: 返回纯文本字符串
-