JavaWeb---Ajax和Jquery学习详解

写在前面

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

什么是异步请求？

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

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

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

可以看到异步的过程和同步请求不一样，用户向服务器发送请求，而在服务器处理请求的这段期间，用户还可以使用浏览器做其他事情。现在目前比较火的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就会将这些关键字发送到服务器，然后服务器就会返回一个建议搜索的列表。

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

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

Ajax使用

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

function ajaxFunction()
 {
 var xmlHttp;
 
 try
    {
   // Firefox, Opera 8.0+, Safari
    xmlHttp=new XMLHttpRequest();
    }
 catch (e)
    {

  // Internet Explorer
   try
      {
      xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
      }
   catch (e)
      {

      try
         {
         xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
         }
      catch (e)
         {
         alert("您的浏览器不支持AJAX！");
         return false;
         }
      }
    }
	
    xmlHttp.onreadystatechange=function()
      {
      if(xmlHttp.readyState==4)
        {
         document.myForm.time.value=xmlHttp.responseText;
        }
      }
    xmlHttp.open("GET","time.asp",true);
    xmlHttp.send(null);
	
 }

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

GET 还是 POST？

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

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

function post() {
			//1. 创建对象
			var request = ajaxFunction();
			
			//2. 发送请求
			request.open( "POST", "DemoServlet01", true );
			
			//想获取服务器传送过来的数据， 加一个状态的监听。 
			request.onreadystatechange=function(){
				if(request.readyState==4 && request.status == 200){
					
					alert("post："+request.responseText);
				}
			}
			
			//如果使用的是post方式带数据，那么 这里要添加头， 说明提交的数据类型是一个经过url编码的form表单数据
			request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
			
			//带数据过去  ， 在send方法里面写表单数据。 
			request.send("name=aobama&age=19");
		}

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

然后是注册账号时检测是否已存在的例子，具体代码一并上传到博客中。

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实现省市联动

学习演示代码链接地址：https://download.csdn.net/download/weixin_45680962/12503542

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