JavaWeb---Ajax和Jquery学习详解

古城微笑少年丶 2023-02-16 00:48 128阅读 0赞

**写在前面**

> 本博客纯属个人学习笔记，如有错误十分欢迎大家指正。

**什么是异步请求？**

要更好的理解异步请求，首先要了解什么是同步，因为异步也是相对同步来说的，下面是两张图片可以帮助我们理解这两个概念，首先是同步请求。  
![同步请求][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY4MDk2Mg_size_16_color_FFFFFF_t_70]

可以看到同步的过程就是：提交请求->等待服务器处理->处理完毕返回 这个期间客户端浏览器不能干任何事。

**上面这张是同步的一个理解，下面是异步请求的过程图**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY4MDk2Mg_size_16_color_FFFFFF_t_70 1]

可以看到异步的过程和同步请求不一样，用户向服务器发送请求，而在服务器处理请求的这段期间，用户还可以使用浏览器做其他事情。现在目前比较火的**Ajax**就是异步请求的一个典型技术。

**Ajax简介**

Ajax（Asynchronous Javascript And XML）即异步 JavaScript 和 XML，它不是一种新的编程语言，而是对目前所出现的技术的整合。

**传统的 JavaScript 编程中我们向服务器请求数据得利用一个 HTML 表单向服务器 GET 或 POST 数据,这样就得重新加载整个页面**。而通过 AJAX，JavaScript 可使用 JavaScript 的 **XMLHttpRequest**对象来直接与服务器进行通信。通过这个对象，您的 JavaScript 可在不重载页面的情况与 Web 服务器交换数据，它可使因特网应用程序更小、更快，更友好。

在2005年，Google通过Google Suggest使Ajax变得流行，Google通过使用Ajax创建了动态性极强的web页面，后来百度等搜索引擎也开始模仿，就是在搜索框输入关键字的时候，JavaScript就会将这些关键字发送到服务器，然后服务器就会返回一个建议搜索的列表。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY4MDk2Mg_size_16_color_FFFFFF_t_70 2]

**ajax主要的使用技术包含以下:**

> 使用CSS和XHTML来表示  
> 使用DOM模型来交互和动态显示  
> 使用XMLHttpRequest来和服务器进行异步通讯  
> 使用JS来绑定和调用

**Ajax使用**

那么要使用ajax，就得创建一个普遍版本都能接受的XMLHttpRequest对象，代码如下：

创建好XMLHttpRequest对象之后，就可以通过使用这个对象向服务器发起GET或者POST请求了。

**GET 还是 POST？**

> 与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。  
> 然而，在以下情况中，请使用 POST 请求：  
> 无法使用缓存文件（更新服务器上的文件或数据库）  
> 向服务器发送大量数据（POST 没有数据量限制，GET限制2kb）  
> 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

下面是使用post请求，用ajax向服务器发送请求：

下面是我自己写的一个搜索框，模仿百度的动态请求服务器的例子

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY4MDk2Mg_size_16_color_FFFFFF_t_70 3]  
然后是注册账号时检测是否已存在的例子，具体代码一并上传到博客中。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY4MDk2Mg_size_16_color_FFFFFF_t_70 4]  
**JQuery简介**

JQuery是一个javascript 的代码框架。它的核心宗旨是**write less do more ,** 即写得更少，做的更多。

通过JQuery可以简化Ajax代码，同样达到向服务器发送请求局部的刷新局部页面，主要有三个方法可以向服务器发送请求，分别是：**load()、get()、post()**

*  load语法
    
    > $("\#元素id").load(url地址,data,callback()\{\});  
    > $("\#div1").load(serlvet); —> 使用的get请求，回来赋值的时候， 使用text（）;去赋值
 *  get语法
    
    > $.get(URL,data,callback);
    
        使用案例： $.get("DemoServlet"  , function(data ,status) { 
        				$("#div01").text(data);
        			});
 *  post语法
    
    > 语法格式：$.post(URL,data,callback);
    
        function post() {
         	$.post("DemoServlet", {name:"zhangsan",age:18},function(data,status) {
         		//想要放数据到div里面去。 --- 找到div
         		$("#div01").html(data);
         	});
         }

**使用JQuery方式校验用户名**

使用JQuery去实现校验用户名
    
    		function checkUserName() { 
    			//1. 获取输入框的内容
    			var name = $("#name").val();
    			
    			//2. 发送请求
    			$.post("CheckUserNameServlet" , { name:name} , function(data , status){ 
    				//alert(data);
    				if(data == 1){ //用户名存在
    					//alert("用户名存在");
    					$("#span01").html("<font color='red'>用户名已被注册</font>");
    				}else{ 
    					//alert("用户名可用");
    					$("#span01").html("<font color='green'>用户名可以使用</font>");
    				}
    			} );
    			//3. 输出响应的数据到页面上。
    		}

效果和前面使用ajax的一样，但是代码简洁很多

**通过JQuery实现省市联动**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY4MDk2Mg_size_16_color_FFFFFF_t_70 5]

**学习演示代码链接地址：https://download.csdn.net/download/weixin\_45680962/12503542**

**声明：本博客纯属个人学习笔记，写博客是为了牢固掌握知识，以及方便复习，如有错误欢迎大家指正。**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY4MDk2Mg_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200606223304187.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY4MDk2Mg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY4MDk2Mg_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200606224506379.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY4MDk2Mg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY4MDk2Mg_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200607095536964.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY4MDk2Mg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY4MDk2Mg_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200607095857751.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY4MDk2Mg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY4MDk2Mg_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200607100000325.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY4MDk2Mg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY4MDk2Mg_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200607102815846.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY4MDk2Mg==,size_16,color_FFFFFF,t_70