Ajax 和 JQuery

最新推荐文章于 2023-07-24 17:15:23 发布

少喝烫水

最新推荐文章于 2023-07-24 17:15:23 发布

阅读量484

点赞数

分类专栏： Javaweb

本文链接：https://blog.csdn.net/tsunagxy/article/details/108023281

版权

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() 方法用于在网页加载完毕后立刻执行的操作，即当

最低0.47元/天解锁文章

少喝烫水

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Ajax 和 JQuery

Ajax 和 JQuery转载自https://blog.csdn.net/chenHaiJaheike/article/details/89045939AjaxAjax的全称是：Asynchronous JavaScript And XML，指的是异步 JavaScript 及 XML（其实主要用的就是javascript技术）它不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术。Ajax的特点是异步，比如可以使用Ajax更新局部网页、使用Ajax在不刷
复制链接

扫一扫