Ajax 和 JQuery
转载自https://blog.csdn.net/chenHaiJaheike/article/details/89045939
Ajax
Ajax的全称是:Asynchronous JavaScript And XML,指的是异步 JavaScript 及 XML(其实主要用的就是javascript技术)
它不是一种新的编程语言,而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术。
Ajax的特点是异步 ,比如可以使用Ajax更新局部网页、使用Ajax在不刷新页面的情况下查询数据、验证用户注册的用户名是否唯一等。
无刷新:不刷新整个页面,只刷新局部
无刷新的好处:
-
只更新部分页面,有效利用带宽
-
提供连续的用户体验
-
类似C/S的交互效果,操作更方便
-
就和国内百度的搜索框一样!
-
传统的网页(即不用ajax技术的网页),想要更新内容或者提交一个表单,都需要重新加载整个网页。
-
使用ajax技术的网页,通过在后台服务器进行少量的数据交换,就可以实现异步局部更新。
-
使用Ajax,用户可以创建接近本地桌面应用的直接、高可用、更丰富、更动态的Web用户界面。
Web 2.0的特点(所有操作都是在不刷新窗口的情况下完成的):用户贡献内容 、内容聚合RSS 、更丰富的“用户体验”;
传统的 Web 开发技术和 Ajax 技术的区别
无论使用哪种开发技术,流程都是先由客户端发送HTTP请求,然后由服器对请求生成响应
Ajax的关键元素
- JavaScript语言:Ajax技术的主要开发语言;
- XML / JSON / HTML等:用来封装请求或响应的数据格式;
- DOM文档对象模型:通过 DOM 属性或方法修改页面元素,实现页面局部刷新;
- CSS:改变样式,美化页面效果,提升用户体验度;
- Ajax 引擎 :即 XMLHttpRequest 对象,以异步方式在客户端与服务器端之间传递数据;
XMLHttpRequest对象
整个Ajax技术的核心,提供异步发送请求的能力;
XMLHttpRequest 对象可以在不刷新当前页面的情况下向服务器端发送异步请求,并接收服务器端的响应结果,从而实现局部更新当前页的功能
尽管名为XMLHttpRequest,但它并不限于和XML文档一起使用,它还可以接收 JSON 或 HTML 等格式的文档数据。 XMLHttpRequest 得到了目前所有览器的较好支持,但它的创建方式在不同浏览器下还具有一定的差别;
1. 创建XMLHttpRequest对象
-
老版本 IE (IE 5和 IE 6):
XMLHttpRequest =new ActiveXObject("Microsoft.XMLHTTP")
-
新版本IE和其他大部分浏览器(推荐使用):
XMLRttpRequest = new XMLHttpReqest()
2. XMLHttpRequest对象属性和方法
XMLHttpRequest属性
status返回当前请求的HTPP状态码
XMLHttpRequest方法
使用Ajax发送GET请求及处理响应
实现Ajax的过程分为发送请求和处理响应两个步骤:
- 发送请求可以分为两种方式:即 GET 方式和 POST方式;
- 处理响应也分两种方式:即处理文本响应和处理 XML 响应;
使用XMLHttpRequest对象发送 GET 请求和POST到服务器端,并处理文本方式响应,需要通过以下 4步骤实现:
- 创建XMLHttpRequest对象,通过window . XMLHttpRequeSt 的返回值判断创建 XMLHttpRequest对象的方式;
- 设置回调函数,通过 onreadystatechange 属性设置回调函数,其中回调函数需要自定义
- 初始化XMLHttpRequest对象,通过 open ( ) 方法设置请求的发送方式和路
- 发送请求
Servlet类
String email = request.getParameter("Email");
String flag="false";
System.out.println(email);
if("111222333@qq.com".equals(email)){
flag = "true";
}else{
flag = "false";
}
PrintWriter out = response.getWriter();
out.print(flag);
out.flush();
GET提交
<script type="text/javascript">
function validate() {
var Email=document.forms[0].email.value;
if (Email=="") {
document.getElementById("demo").innerHTML="<font color='red'>请输入邮箱,不能为空</font>";
}else{
//创建XMLHttpRequest对象
if (window.XMLHttpRequest) {
xmlHttpRequest = new XMLHttpRequest();
}else{
xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
//2. 设置回调函数
xmlHttpRequest.onreadystatechange=callBck;
//3.初始化xmlHttpRequest组件
var url="UserServlet?Email="+Email;
xmlHttpRequest.open("get", url, true);
xmlHttpRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
//4. 发送请求
xmlHttpRequest.send(null);
function callBck() {
if(xmlHttpRequest.readyState==4 && xmlHttpRequest.status==200){
var info=xmlHttpRequest.responseText;
if(info=="true"){
document.getElementById("demo").innerHTML="<font color='red'>邮箱已被注册</font>";
document.getElementById("email").value="";
}else{
document.getElementById("demo").innerHTML="<font color='green'>邮箱可以使用</font>";
}
}
}
}
}
</script>
GET请求和POST请求的区别
伪造Ajax
我们可以使用前端的一个标签来伪造一个ajax的样子。iframe标签
- 新建一个module :sspringmvc-06-ajax , 导入web支持!
- 编写一个 ajax-frame.html 使用 iframe 测试,感受下效果
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>kuangshen</title>
</head>
<body>
<script type="text/javascript">
<!--window.onload() 方法用于在网页加载完毕后立刻执行的操作,即当 HTML 文档加载完毕后,立刻执行某个方法。-->
window.onload = function(){