您的位置：首页 > Web前端 > JQuery

【JavaEE】javaEE学习笔记之Js原生Ajax和jQuery 的Ajax

2017-12-27 20:24 806 查看

一、js原生Ajax

AJAX - 向服务器发送请求

1.创建Ajax引擎对象

2.位Ajax引擎对象绑定监听

3.绑定提交地址

4.发送请求

5.接受响应数据

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax</title>
<script type="text/javascript">
//"get"提交
function fn1() {
//1.创建Ajax引擎对象，所有的操作都是Ajax引擎对象
var xmlHttp = new XMLHttpRequest();

//2.绑定监听----监听服务器是否已经返回响应数据
xmlHttp.onreadystatechange = function() {
if(xmlHttp.readyState==4 && xmlHttp.status==200){
//5.接受响应数据
var res = xmlHttp.responseText;
//console.log("xxxxxxxxxxxxxxx");
console.log(res);
document.getElementById("span1").innerHTML = res;
}
}
//3.绑定地址
xmlHttp.open("GET","/web22/ajax?name=xxx",true);
//4.发送请求
xmlHttp.send();
}

//post提交
function fn2() {
//1.创建Ajax引擎对象，所有的操作都是Ajax引擎对象
var xmlHttp = new XMLHttpRequest();

//2.绑定监听----监听服务器是否已经返回响应数据
xmlHttp.onreadystatechange = function() {
if(xmlHttp.readyState==4 && xmlHttp.status==200){
//5.接受响应数据
var res = xmlHttp.responseText;
//console.log("xxxxxxxxxxxxxxx");
console.log(res);
document.getElementById("span1").innerHTML = res;
}
}
//3.绑定地址

xmlHttp.open("POST","/web22/ajax",true);
xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//4.发送请求
xmlHttp.send("fname=Bill&lname=Gates");
}
</script>
</head>
<body>
<input type="button" value="异步访问服务器" onclick="fn1()"><span id="span1"></span>
</body>
</html>

二、jQuery 的ajax

服务端：

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class AjaxServlet2 extends HttpServlet {
private static final long serialVersionUID = 1L;

protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String name = request.getParameter("name");
String age = request.getParameter("age");
System.out.println(name+"---"+age);
//java返回json格式的字符串

//String user =
a3d7
{"name":"tom","age":24};
response.setContentType("text/html;charset=UTF-8");
response.getWriter().write("{\"name\":\"tom\",\"age\":24}");
}

protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
response.setContentType("text/html; charset=UTF-8");
doGet(request, response);
}
}


客户端：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery_ajax</title>
</head>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript">
function fn1() {
//get异步访问
$.get(
"/web22/ajax2",//访问的url地址
{"name":"tom","age":"24"},//请求数据
function (data) {//成功后的回调函数
console.log(data.name);
},
//"text"//返回参数的类型指data
"json"
)
}

function fn2() {
//post异步访问
$.post(
"/web22/ajax2",//访问的url地址
{"name":"tom","age":"24"},//请求数据
function (data) {//成功后的回调函数
console.log(data.name);
},
//"text"//返回参数的类型指data
"json"
)
}
function fn3() {
$.ajax({
url:"/web22/ajax2",
async:true,
type:"POST",
data:{"name":"jerry","age":"24"},
success:function(data){
console.log("success。。。"+data.name);
},
error:function(){

console.log("fail。。。")
},
dataType:"json",
})
}
</script>
<body>
<input type="button" value="get访问服务器" onclick="fn1()"><span id="span1"></span>
<br>
<input type="button" value="post访问服务器" onclick="fn2()"><span id="span2"></span>
<br>
<input type="button" value="ajax访问服务器" onclick="fn3()"><span id="span3"></span>
</body>
</html>

三、使用工具json转换

1）jsonlib

导包

2）Gson,google

3）fastjson
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航