Ajax学习

最新推荐文章于 2024-10-20 06:16:22 发布

liyang9999

最新推荐文章于 2024-10-20 06:16:22 发布

阅读量96

点赞数

文章标签： ajax js

本文链接：https://blog.csdn.net/liyang9999/article/details/104399916

版权

Ajax学习

一.Ajax简介:

2005年Jesse James Garrett发表了一篇文章，标题为：“Ajax：A new Approach to Web Applications”。他在这篇文章里介绍了一种技术，用他的话说，就叫：Ajax，是 Asynchronous JavaScript + XML的简写。这种技术能够向服务器请求额外的数据而无须卸载页面(即刷新)，会带来更好的用户体验。一时间，席卷全球。

Ajax技术核心是XMLHttpRequest对象(简称XHR)，这是由微软首先引入的一个特性，其他浏览器提供商后来都提供了相同的实现。在XHR出现之前，Ajax式的通信必须借助一些手段来实现，大多数是使用隐藏的框架或内嵌框架。

XHR 的出现，提供了向服务器发送请求和解析服务器响应提供了流畅的接口。能够以异步方式从服务器获取更多的信息，这就意味着，用户只要触发某一事件，在不刷新网页的情况下，更新服务器最新的数据。

虽然Ajax中的x代表的是 XML，但 Ajax通信和数据格式无关，也就是说这种技术不一定使用XML。

二.XMLHttpRequest对象

1.在浏览器中就可将它实例化，使用XMLHttpRequest对象，必须调用open()方法,接受三个参数：要发生的请求方式，请求地址和表示是否异步，在通过send()方法发送请求到服务器上

2.当请求发送到服务端，收到响应后，响应的数据会自动填充XHR对象的属性。四个属性：responseText：作为响应主体返回文本。 responseXML：如果响应主体内容类型是 “text/xml” 或 “application/xml”，则返回包含响应数据的XML DOM文档。status：

响应HTTP状态。statusText：HTTP状态的说明

3.响应过后，第一步就要检查status属性，来确定响应成功，一般状态码为200，就为响应成功。

200：ok，服务器成功返回了页面

500：服务器遇到意外错误，无法完成请求

404：指定的url未找到

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button onclick="ajaxGet1()">同步请求</button></br>
		<button onclick="ajaxGet2()">异步请求</button>
	</body>
	<script>
		function ajaxGet1(){
			//1.创建XMLHttpRequest对象
			var xhr = new XMLHttpRequest();
			//2.打开请求/准备请求
			xhr.open("GET","js/data.json",false);      //同步请求
			//3.发送请求
			xhr.send(null);
			//4.接收响应
			if(xhr.status==200){
				console.log(xhr.responseText);
			}
		}
		function ajaxGet2(){
			//1.创建XMLHttpRequest对象
			var xhr = new XMLHttpRequest();
			//2.打开请求/准备请求
			xhr.open("POST","js/data.json",true);      //异步请求
			xhr.send(null);
			xhr.onreadystatechange=function(){
				//判断该状态码是否是4，完全响应
				if(xhr.readyState==4){
					if(xhr.status==200){
						console.log(xhr.responseText);
					}
				}
			}
		}
	</script>
</html>

4.同步调用虽然简单，但ajax最常用的是帮助我们完成异步请求，在使用异步调用的时候，检查readyState属性，每当readyState属性改变时，触发 readystatechange 事件。该属性有5个值：

0 ：未初始化，还未调用open方法

1 ：启动，已经调用open方法，但未调用send方法

2 ：发送，已经调用send方法，但还未得到响应

3 ：接收，已经接收到部分响应数据

4：完成，已经接收全部响应数据

三.GET和POST

1.在服务器中有两种请求方式：分别时get和post，在ajax使用过程中，get的使用频率比post高。

2.GET请求：GET请求会将参数追加到URL的末尾。注意：当没有encodeURIComponent()方法时，在一些特殊字符比如“&”，会出现错误导致无法获取。

3.POST请求：POST 请求可以包含非常多的数据，我们在使用表单提交的时候，很多就是使用的 POST 传输方式。

POST可以存储2M大小的字节，而GET只能存储1024M字节，GET存储空间较小。

从性能上来讲POST 请求比GET请求消耗更多一些，用相同数据比较，GET 最多比POST 快两倍。

四.封装Ajax

当我们使用原生的js去写Ajax时，非常繁琐，切代码多，参数问题等…，我们就需要一个Ajax函数，封装起来，方便我们调用。

五.Jquery-Ajax

1.$.ajax()

格式：$.ajax({})；

参数：

type: 请求方式GET或POST

url：请求地址

async：异步（默认true）或同步（false）

data: 发送到服务端的数据

dataType: 指定服务端返回的数据类型

success：请求成功后执行该函数

error：请求失败后执行该函数

get请求

$.ajax({  
	type:"get",  
	url:"js/data.json",  
	async:true,  
	success : function (msg){   
		var str = msg;   
		console.log(str)   	
		$('div').append("<ul></ul>");  
       for(var i=0; i<msg.prices.length;i++){    				$('ul').append("<li></li>")     					$('li').eq(i).text(msg.prices[i])   
       }  
       },  error : function (errMsg) {   							console.log(errMsg);   								$('div').html(errMsg.responseText)  } });

post请求

$.ajax({  
	type:"post",  
	url:"js/data.json",  
	data:"name=tom",
	async:true,  
	contentType: "application/x-www-form-urlencoded", 
	success : function (msg){   
		var str = msg;   
		console.log(str)   	
		$('div').append("<ul></ul>");  
       for(var i=0; i<msg.prices.length;i++){    				$('ul').append("<li></li>")     					$('li').eq(i).text(msg.prices[i])   
       }  
       },  error : function (errMsg) {   							console.log(errMsg);   								$('div').html(errMsg.responseText)  } });

2.$.get()

可以帮助我们取代复杂的$.ajax()方法，是get方式的ajax请求。

1.请求 json 文件，忽略返回值 $.get(’…/js/cuisine_area.json’);

2.请求 json 文件，传递参数，忽略返回值 $.get(’…/js/cuisine_area.json’,{name:“tom”,age:100});

3.请求 json 文件,拿到返回值,请求成功后可拿到返回值 $.get(’…/js/cuisine_area.json’,function(data){ console.log(data) });

4.请求 json 文件,传递参数,拿到返回值 $.get(’…/js/cuisine_area.json’,{name:“tom”,age:100},function(data){ console.log(data) })

3.$.post()

可以帮助我们取代复杂的$.ajax()方法，是post方式的ajax请求。

…

4.$.getJSON()

表示请求返回的数据类型是 JSON格式的 ajax请求 ,但也是get方式的请求。

5.jsonp

可以支持远程跨域，当我们有两个域名需要相互访问时，使用普通的Ajax方法是无法获取到数据的，我们可以使用jsonp方式发送请求。

$.ajax({
		type:"get",
		url:"http://iservice.itshsxt.com/restaurant/find",
		dataType:"jsonp",		//允许跨域,但是服务器也必须支持跨域，单个支持不行。
		success:function(result){
			console.log(result);
		}
	});