Fork me on GitHub

分别使用原生Ajax 和Jquery的方式发送请求

发表于 | 分类于 |
本文共计: 1,771 | 阅读耗时 ≈ 8

分别使用原生Ajax 和Jquery的方式发送请求

Ajax

  • 是什么?

“Asynchronous Javascript And XML”（异步JavaScript和XML），

并不是新的技术，只是把原有的技术，整合到一起而已。 

1
2
3
4
1.使用CSS和XHTML来表示。
2. 使用DOM模型来交互和动态显示。
3.使用XMLHttpRequest来和服务器进行异步通信。
4.使用javascript来绑定和调用。
  • 有什么用?

咱们的网页如果想要刷新局部内容。 那么需要重新载入整个网页。用户体验不是很好。 就是为了解决局部刷新的问题。 保持其他部分不动，只刷新某些地方。

内部原理

诚如前面所说的， Ajax 并不是一项新技术。而是包装了现有的技术，然后使用他们来完成工作而已。

那么现在给大家举个例子， 还是以咱们的判断用户名是否已被注册为例。

传统方式：

1
2
3
4
5
1. 输入用户名，
2. 点击一个按钮，校验。
3. 把数据提交给服务器
4. 服务器在后台帮助我们完成校验，并且反馈信息。
5. 我们在浏览器上提示用户，给出结果

Ajax方式：

1
2
3
4
5
6
7
8
9
ajax方式与前面的方式其实从要做的事情来说，是一样的。 ajax也没有牛到，不用去访问服务器就知道你的用户名是否已被占用。那么它是如何工作的呢?

1.  通过JS 获取咱们的输入框文本内容 document.getElementById("username").value

2. 通过XmlHttpRequest 去执行请求。 XmlHttpRequest 其实就是 XML + http + Request 的组合。

3. 请求结束后，收到结果， 再使用 js 去完成提示。 

4. 可以在顺便配合 css 样式来增加提示效果。

Ajax 的请求/响应

与服务器上的 Web 应用程序打交道的是 JavaScript 技术，而不是直接提交给那个应用程序的 HTML 表单。
发出请求
如何使用XMLHttpRequest 对象?
首先–需要一个能够调用JavaScript 方法 的Web 页面 。
接下来就是在所有 Ajax 应用程序中基本都雷同的流程：

1、从 Web 表单中获取需要的数据。
2、建立要连接的 URL。
3、打开到服务器的连接。
4、设置服务器在完成后要运行的函数。
5、发送请求。

数据请求 Get

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
//创建对象
function  ajaxFunction(){
	var xmlHttp;
	try{ // Firefox, Opera 8.0+, Safari
		xmlHttp=new XMLHttpRequest();
        }
        catch (e){
        try{// Internet Explorer
        	xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
            }
            catch (e){
            try{
            	xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
                }
                catch (e){}
                }
           }
    return xmlHttp;
    }
    
    //2.发送请求
	//执行get请求
	function get() {

		//1. 创建xmlhttprequest 对象
	var request = ajaxFunction();
	
	//2. 发送请求。
	// http://localhost:8080/day16/demo01.jsp
	//http://localhost:8080/day16/DemoServlet01
	
	/*	
		参数一： 请求类型  GET or  POST
		参数二： 请求的路径
		参数三： 是否异步， true  or false
	*/
	request.open("GET" ,"/day16/DemoServlet01" ,true );
	request.send();
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
如果发送请求的同时，还想获取数据，那么代码如下

//执行get请求
function get() {
	
	//1. 创建xmlhttprequest 对象
	var request = ajaxFunction();
	
	//2. 发送请求
	request.open("GET" ,"/day16/DemoServlet01?name=aa&age=18" ,true );
	
	//3. 获取响应数据 注册监听的意思。  一会准备的状态发生了改变，那么就执行 = 号右边的方法
	request.onreadystatechange = function(){
		
		//前半段表示 已经能够正常处理。  再判断状态码是否是200，已经处理请求
		if(request.readyState == 4 && request.status == 200){
			//弹出响应的信息
			alert(request.responseText);
		}
	}
	request.send();
}

数据请求 Post

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<script type="text/javascript">
//1. 创建对象
function  ajaxFunction(){
   var xmlHttp;
   try{ // Firefox, Opera 8.0+, Safari
        xmlHttp=new XMLHttpRequest();
    }
    catch (e){
	   try{// Internet Explorer
	         xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
	      }
	    catch (e){
	      try{
	         xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
	      }
	      catch (e){}
	      }
    }

	return xmlHttp;
 }

function post() {
	//1. 创建对象
	var request = ajaxFunction();
	
	//2. 发送请求
	request.open( "POST", "/day16/DemoServlet01", true );

	//如果不带数据，写这行就可以了
	//request.send();
	
	//如果想带数据，就写下面的两行
	
	//如果使用的是post方式带数据，那么 这里要添加头， 说明提交的数据类型是一个经过url编码的form表单数据
	request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
	
	//带数据过去  ， 在send方法里面写表单数据。 
	request.send("name=aobama&age=19");
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//需要获取数据
function post() {
	//1. 创建对象
	var request = ajaxFunction();
	//2. 发送请求
	request.open( "POST", "/day16/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的方式实现请求与相应

load

1
2
3
<a href="" onclick="load()">使用JQuery执行load方法</a>

有两次刷新，  先走 onClick的方法，取到数据回来之后，赋值显示。 接着 走 href=""的路径，但是这个属性没有给值，所以会把当前的页面重新再刷新一次。所以导致看不见值。
1
2
3
4
5
//找到这个元素， 去执行加载的动作， 加载/day16/DemoServlet02 ， 得到的数据，赋值显示
$("#aaa").load("/day16/DemoServlet02" , function(responseText , statusTXT  , xhr) {
		//找到id为text01的元素， 设置它的value属性值为 responseText 对应的值
		$("#aaa").val(responseText);
	});

Get

1
2
3
$.get("/day16/DemoServlet02"  , function(data ,status) {
		$("#div01").text(data);
	});

赋值显示

  • val(“aa”);

只能放那些标签带有value属性

  • html(“aa”); —写html代码
  • text(“aa”);

其实没有什么区别，如果想针对这分数据做html样式处理，那么只能用html()

post

1
2
3
4
5
6
function post() {
		$.post("/day16/DemoServlet02", {name:"zhangsan",age:18},function(data,status) {
			//想要放数据到div里面去。 --- 找到div
			$("#div01").html(data);
		});
	}

load & get&post比较

  • load

    $(“#元素id”).load(url地址);

    1
    $("#div1").load(serlvet); ---> 使用的get请求，回来赋值的时候， 使用text（）;去赋值

  • get

    语法格式 ： $.get(URL,callback); 

1
2
3
使用案例： $.get("/day16/DemoServlet02"  , function(data ,status) {
	$("#div01").text(data);
});

  • post

    语法格式：$.post(URL,data,callback);

1
2
3
4
5
6
function post() {
	$.post("/day16/DemoServlet02", {name:"zhangsan",age:18},function(data,status) {
		//想要放数据到div里面去。 --- 找到div
		$("#div01").html(data);
	});
}

使用JQuery去实现校验用户名

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function checkUserName() {
	//1. 获取输入框的内容
	var name = $("#name").val();
	
	//2. 发送请求
	$.post("/day16/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的方式发送请求

文章作者:WilsonSong

发布时间:2018年08月19日 - 20:08

最后更新:2018年08月24日 - 16:08

原始链接:https://songwell1024.github.io/2018/08/19/AjaxAndJquery/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

-------------本文结束感谢您的阅读-------------