AJAX-全集
2020-03-31 本文已影响0人
通灵路耳
同步+异步
同步：客户端发出请求，需要等服务器响应，此期间客户端不能做其他工作
异步：客户端发出请求，无需等待响应，客户端可以干其他事情
Ajax同步+异步
Ajax同步：JS代码加载到Ajax时候，要把页面其他代码停止加载，当Ajax执
行完毕后，其他代码才可以继续运行。
Ajax异步：JS代码加载到Ajax时候，其他代码照常运行
JavaScript之（AJAX）
<html>
<head>
<title>$Title$</title>
<script>
function fun() {
//原生AJAX
//1、创建核心对象
var xmlhttp;
if(window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
}else{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//2、建立连接
//true(异步)false（同步）
xmlhttp.open("GET","HelloServlet?username=tom",true)
//3、发送请求
xmlhttp.send();
//4、接受并处理结果
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState ==4 && xmlhttp.status==200){
var responseText=xmlhttp.responseText;
alert(responseText);
}
}
}
</script>
</head>
<body>
<<input type="button" value="发送异步" onclick="fun();">
</body>
</html>
JQuery之（AJAX）
1、jquery.min.js文件
2、servlet的jar包
3、index.html页面
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>测试</title>
</head>
<body>
<script src="jquery.min.js"></script>
<script type="text/javascript">
function fun(){
//ajax
$.ajax({
url:"HelloServlet",//请求路径
type:"post",//请求方式
data:{"username":"jack"},//请求参数格式（json）
dataType:"text",//响应格式设置（json 或 text）
success:function(data){//响应结果（data在这里表示一个变量）
alert(data);
},
});
}
</script>
<input type="button" value="JQuery与AJAX" onclick="fun();">
<input>
</body>
</html>
4、HelloServlet
package com.llhc;
import java.io.IOException;
public class HelloServlet extends javax.servlet.http.HttpServlet {
public void doPost(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {
String username=request.getParameter("username");
System.out.println(username);
response.getWriter().write("success");
}
public void doGet(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {
doPost(request,response);
}
}
JQuery-有form表单，之（AJAX）
function add(){
var validate = $("#add-form").form("validate");
if(!validate){
$.messager.alert("消息提醒","请检查你输入的数据!","warning");
return;
}
var data = $("#add-form").serialize();
$.ajax({
url:'add',
dataType:'json',
type:'post',
data:data,
success:function(data){
if(data.type == 'success'){
$.messager.alert('信息提示','添加成功！','info');
$('#add-dialog').dialog('close');
$('#data-datagrid').treegrid('reload');
}else{
$.messager.alert('信息提示',data.msg,'warning');
}
}
});
}
