一、概念
Ajax = Asynchronous JavaScript and XML(异步的JavaScript和XML)
Ajax不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术
1.同步和异步
- 异步 : 传输是面向字符的传输，它的单位是字符；
- 同步 : 传输是面向比特的传输，它的单位是帧，它传输的时候要求接收方和发送方之间的时钟是一致的。
- 同步的话，必须这个操作完了才会执行下一步，在等待期间浏览器会挂起不执行下面的js代码；
- 异步则是【告诉】浏览器去做，【告诉】是一瞬间的事情，然后继续执行下一步，等到结果返回之后，浏览器会通知js执行相应的回调。
二、Ajax作用
- 注册时，输入用户名自动检测用户是否已经存在
- 登录时，提示用户名密码错误
- 删除数据时，将行ID发送到后台，后台在数据库中删除，数据库删除成功后，在页面DOM中将数据行业删除。
我们可以使用前端的一个标签来伪造一个ajax的样子。iframe标签
伪造Ajax
window.onload = function f(){
var myDate = new Date();
document.getElementById('currentTime').innerText = myDate.getTime();
}
function loadPage(){
var targetURL = document.getElementById('url').value;
console.log(targetURL);
document.getElementById('iframePosition').src = targetURL;
}
请输入要加载的地址：
加载页面的位置
运行结果图
三、Ajax原理
jQuery Ajax本质就是XMLHttpRequest,对他进行了封装，方便调用
Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发送异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面
XMLHttpRequest是ajax的核心机制，它是在IE5中首先引入的，是一种支持异步请求的技术。简单的说，也就是javascript可以及时向服务器提出请求和处理响应，而不阻塞用户。达到无刷新的效果。
使用jQuery需要先导入jQuery的js文件
package com.tang.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@Controller
@RequestMapping("/ajax")
public class AjaxController {
//第一种方式，服务器要返回一个字符串，直接使用response
@RequestMapping("/a1")
public void ajax(String name, HttpServletResponse response) throws IOException {
if("admin".equals(name)){
response.getWriter().print("true");
}else{
response.getWriter().print("false");
}
}
}
Title
//所有参数：
//url:待载入页面的URL地址
//data：待发送key/value 参数
//success:载入成功时回调函数
//data: 封装了服务器返回的数据
//status: 状态
function a1(){
$.ajax({
url:"${pageContext.request.contextPath}/ajax/a1",
data:{'name':$("#txtName").val()},
success:function (data,status){
alert(data);
alert(status);
}
});
}
用户名：
到这我觉得，有些都看不懂了，了解之后觉得Ajax等学到SpringMVC之后再回来补
Original: https://www.cnblogs.com/twq46/p/16551632.html
Author: 剑断青丝ii
Title: Javaweb-Ajax详解
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/620386/
转载文章受原作者版权保护。转载请注明原作者出处！