Ajax 学习

最新推荐文章于 2022-09-19 22:26:35 发布

一只猪的思考

最新推荐文章于 2022-09-19 22:26:35 发布

阅读量99

点赞数

分类专栏： Javaweb 文章标签： ajax jsonp

本文链接：https://blog.csdn.net/weixin_45829957/article/details/109279383

版权

Javaweb 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

2.1、什么是Ajax？

AJAX 即“Asynchronous Javascript And XML”（异步JavaScript 和XML），是指一种创建交互式网页应用的
网页开发技术。

ajax 是一种浏览器异步发起请求。局部更新页面的技术。

2.2、javaScript 原生Ajax 请求

原生的Ajax 请求，
1、我们首先要创建XMLHttpRequest 对象
2、调用open 方法设置请求参数
3、调用send 方法发送请求
4、在send 方法前绑定onreadystatechange 事件，处理请求完成后的操作。

1）创建一个html 页面，发起请求。代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function ajaxRequest() {
// 1、我们首先要创建XMLHttpRequest
var xhr = new XMLHttpRequest();
// 2、调用open 方法设置请求参数
xhr.open("GET","ajaxServlet?action=javaScriptAjax&a="+new Date(),true);
// 4、在send 方法前绑定onreadystatechange 事件，处理请求完成后的操作。
xhr.onreadystatechange = function() {
// 判断请求完成，并且成功
if (xhr.readyState == 4 && xhr.status == 200) {
document.getElementById("div01").innerHTML = xhr.responseText;
}
}
// 3、调用send 方法发送请求
xhr.send();
}
</script>
</head>
<body>
<button onclick="ajaxRequest()">ajax request</button>
<div id="div01">
</div>
</body>
</html>

2）创建一个AjaxServlet 程序接收请求

package com.atguigu.servlet;
import java.io.IOException;
import java.util.Random;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.atguigu.gson.GsonTest;

import com.google.gson.Gson;
public class AjaxServlet extends BaseServlet {
private static final long serialVersionUID = 1L;
protected void javaScriptAjax(HttpServletRequest request, HttpServletResponse
response)
throws ServletException, IOException {
System.out.println("ajax 请求过来了a--" + request.getParameter("a"));
Random random = new Random(System.currentTimeMillis());
// 使用随机数，可以让客户端看到变化
response.getWriter().write(
new Gson().toJson(new GsonTest.Person(random.nextInt(100), "12312")));
}
}

2.3、JQuery 的Ajax 请求(重点****)

四个Ajax 请求方法
$.ajax 方法
$.get 方法
$.post 方法
$.getJSON 方法

一个表单序列化方法：serialize()表单序列化方法

如何使用上面的五个方法：

在JQuery 中和Ajax 请求有关的方法有四个

$.ajax 请求参数

url： 请求的地址
type : 请求的方式get 或post
data : 请求的参数string 或json
success: 成功的回调函数
dataType: 返回的数据类型常用json 或text

下面的方法必须遵守参数的顺序

$.get 请求和$.post 请求

url:请求的URL 地址
data:待发送Key/value 参数。
callback:载入成功时回调函数。
type:返回内容格式，xml, html, script, json, text。

Jquery 的$.getJSON

url:待载入页面的URL 地址
data:待发送Key/value 参数。
callback:载入成功时回调函数。

表单的序列化
serialize() 方法可以把一个form 表单中所有的表单项。都以字符串name=value&name=value 的形式进行拼接，省去
我们很多不必要的工作。

由于$.get、$.post 和getJSON 这三个方法的底层都是直接或者间接地使用$.ajax()方法来实现的异步请求的调用。所
以我们以$.ajax()方法的使用为示例进行展示：

1）Jquery_Ajax_request.html 的代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
// ajax 请求
$("#ajaxBtn").click(function(){
$.ajax({
url : "ajaxServlet", // 请求地址
error:function(){ // 请求失败回调
alert("请求失败");
},
success:function(data){ // 请求成功回调
alert( data );
},
type:"POST", // 请求的方式
dataType:"json", // 返回的数据类型为json 对象
data:{ // 请求的参数
action:"jqueryAjax",
a:12,
date: new Date()
}
});
});

// ajax--get 请求
$("#getBtn").click(function(){
$.get(
"ajaxServlet",{
action:"jqueryGet",
a:12,
date:new Date()
},function(data){alert(data);},"json"
);
});
// ajax--post 请求
$("#postBtn").click(function(){
// post 请求
$.post(
"ajaxServlet", // 请求路径
{ // 请求参数
action:"jqueryPost",
a:12,
date:new Date()
},
function(data){ alert( data ) }, // 成功的回调函数
"text" // 返回的数据类型
);
});
// ajax--getJson 请求
$("#getJsonBtn").click(function(){
// 调用
$.getJSON(
"ajaxServlet", // 请求路径
{ // 请求参数
action:"jqueryGetJSON",
a:12,
date:new Date()
},
function(data){ alert( data ) } // 成功的回调函数
);
});
// ajax 请求
$("#submit").click(function(){
// 把参数序列化
var data = $("#form01").serialize();
alert(data);

});
});
</script>
</head>
<body>
<div>
<button id="ajaxBtn">$.ajax 请求</button>
<button id="getBtn">$.get 请求</button>
<button id="postBtn">$.post 请求</button>
<button id="getJsonBtn">$.getJSON 请求</button>
</div>
<br/><br/>
<form id="form01" >
用户名：<input name="username" type="text" /><br/>
密码：<input name="password" type="password" /><br/>
下拉单选：<select name="single">
<option value="Single">Single</option>
<option value="Single2">Single2</option>
</select><br/>
下拉多选：
<select name="multiple" multiple="multiple">
<option selected="selected" value="Multiple">Multiple</option>
<option value="Multiple2">Multiple2</option>
<option selected="selected" value="Multiple3">Multiple3</option>
</select><br/>
复选：
<input type="checkbox" name="check" value="check1"/> check1
<input type="checkbox" name="check" value="check2" checked="checked"/>
check2<br/>
单选：
<input type="radio" name="radio" value="radio1" checked="checked"/> radio1
<input type="radio" name="radio" value="radio2"/> radio2<br/>
<input id="submit" type="submit" />
</form>
</body>
</html>

2)AjaxServlet 的代码如下：

package com.atguigu.servlet;
import java.io.IOException;
import java.util.Random;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.atguigu.gson.GsonTest;
import com.google.gson.Gson;
public class AjaxServlet extends BaseServlet {
private static final long serialVersionUID = 1L;
protected void javaScriptAjax(HttpServletRequest request, HttpServletResponse
response)
throws ServletException, IOException {
System.out.println("ajax 请求过来了a--" + request.getParameter("a"));
Random random = new Random(System.currentTimeMillis());
// 使用随机数，可以让客户端看到变化
response.getWriter().write(
new Gson().toJson(new GsonTest.Person(random.nextInt(100), "12312")));
}
protected void jqueryAjax(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
System.out.println("jqueryAjax 请求过来了a--" + request.getParameter("a"));
Random random = new Random(System.currentTimeMillis());
// 使用随机数，可以让客户端看到变化
response.getWriter().write(
new Gson().toJson(new GsonTest.Person(random.nextInt(100), "12312")));
}
protected void jqueryGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
System.out.println("jqueryGet 请求过来了a--" + request.getParameter("a"));
Random random = new Random(System.currentTimeMillis());
// 使用随机数，可以让客户端看到变化
response.getWriter().write(
new Gson().toJson(new GsonTest.Person(random.nextInt(100), "12312")));
}
protected void jqueryPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
System.out.println("jqueryPost 请求过来了a--" + request.getParameter("a"));
Random random = new Random(System.currentTimeMillis());
// 使用随机数，可以让客户端看到变化
response.getWriter().write(
new Gson().toJson(new GsonTest.Person(random.nextInt(100), "12312")));
}

protected void jqueryGetJSON(HttpServletRequest request, HttpServletResponse
response)
throws ServletException, IOException {
System.out.println("jqueryGetJSON 请求过来了a--" + request.getParameter("a"));
Random random = new Random(System.currentTimeMillis());
// 使用随机数，可以让客户端看到变化
response.getWriter().write(
new Gson().toJson(new GsonTest.Person(random.nextInt(100), "12312")));
}
}

一只猪的思考

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Ajax 学习

2.1、什么是Ajax？AJAX 即“Asynchronous Javascript And XML”（异步JavaScript 和XML），是指一种创建交互式网页应用的网页开发技术。ajax 是一种浏览器异步发起请求。局部更新页面的技术。2.2、javaScript 原生Ajax 请求原生的Ajax 请求，1、我们首先要创建XMLHttpRequest 对象2、调用open 方法设置请求参数3、调用send 方法发送请求4、在send 方法前绑定onreadystat.
复制链接

扫一扫