ajax 学习总结

编程大学姐远春儿

已于 2024-07-10 13:32:47 修改

阅读量1k

点赞数 3

CC 4.0 BY-SA版权

文章标签： ajax 异步跨域 json jsonp

于 2017-07-21 16:50:11 首次发布

本文链接：https://blog.youkuaiyun.com/sinat_34647836/article/details/75665434

ajax总结专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了Ajax的概念、原理及其在网页局部刷新的应用。同时提供了原生Ajax的登录示例代码，并解释了其中的关键步骤，如发送请求、接收响应等。此外还介绍了如何解析XML和JSON数据，以及jQuery中的Ajax用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

学习一样动习首先应该明白：这是什么？
###ajax是什么？

我们就从理解“ajax”的字面含义开始。
AJAX =
Asynchronous （美[e’sɪŋkrənəs]）异步的
JavaScript
And
XML
也就是说，ajax就是异步的 JavaScript 和 XML。
什么意思呢？我说一个实际需求你就明白了。
我们在浏览网页时候，想要重新加载整个页面，按一下“f5”键就行了。但是如果我们只想获取局部数据，如果让整个页面都重新加载必定很浪费流量。而通过一部请求数据的方式（AJAX ），可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页内容。
###在Ajax普及之前，也有实现局部刷新的方法——Iframe 框架。

这里写图片描述
这种方式简单说就是页面里面嵌套页面，当表单提交后，相应的内容会返回到iframe框架中，主页面的内容不更新。

原生AJAX

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>ajax登录</title>
</head>
<body>
<div>
    <div id="showInfo"></div>
	<form id="form">
		用户名：<input type="text" name="username" id="username"><br>
		密码：<input type="password" name="password" id="password">
		<input type="button" id="btn" value="登录">
	</form>
</div>
	<script type="text/javascript">
		window.onload = function(){
			var btn = document.getElementById("btn");
			btn.onclick = function(){ 
			//点击事件获取用户输入需要验证的信息
				var username = document.getElementById("username").value;
				var password = document.getElementById("password").value;
				//第一步：设置一个xhr变量，并做XMLHttpRequest浏览器兼容
				//XMLHttpRequest 对象用于在后台与服务器交换数据。
				var xhr = null;  
				if(window.XMLHttpRequest){
					xhr = new XMLHttpRequest(); //标准浏览器
				}else{//低版本IE浏览器
					xhr = new ActiveXObject("Mcrosoft.XMLHTTP");
				}
				
				//第二步：配置发送请求的一些参数,准备发送请求
				var url = './check.php?username='+username+"&password="+password; 
				//拼接URL，后台文件名用？参数和参数之间用&链接
				xhr.open('get',url,true); 
				//请求是同步还是异步，异步为true，同步为false，默认为true
				
				//第三步：执行发送的动作
				xhr.send(null); 
				
				//第四步：指定一些回调函数
				xhr.onreadystatechange = function(){
				//Ajax中的回调函数类似于setTimeout中的定时函数，先定义后执行
				   if(xhr.readystate == 4 && xhr.status == 200){
                     //首先判断请求是否完成 并且成功得到请求的数据
						var data = xhr.responseText; 
						//获得字符串形式的响应数据,并把返回的数据存放到data变量里面
						if(date == 1){ 
						//接下来对数据如何操作根据需求写相应的代码
						document.getElementById('showInfo').innerHTML = '用户名或者密码错误';
						}else if(data == 2){
							document.getElementById('showInfo').innerHTML = '登录成功';
						}
					}
				}
			}
		}
	</script>
</body>
</html>

后台的数据我们用PHP简单实现：

<?php 
$username = $_GET['username'];
$password = $_GET['password'];

if($username == 'admin' && $password == '123'){
	echo 2;
}else{
	echo 1;
}
?>

相信刚开始学习AJAX的同学跟我一样，对上述代码有很多疑问，下面我分享一下，我的疑问以及找到的解答：

问题1：为什么send（），里面要用null？
1. 一般情况下，使用Ajax提交的参数多是些简单的字符串，可以直接使用GET方法将要提交的参数写到open方法的url参数中，此时send方法的参数为null。也就是说send是用来传递获取数据的URL的参数的，如果我们用get方法请求，可以直接在第二步，也就是准备请求的参数时，用为变量拼接URL,这是不需要传递参数了，一般浏览器可以用send（），但是低版本浏览器只支持send（null），为了兼容最好写send（null）。

var url = "login.jsp?user=XXX&pwd=XXX";
      xmlHttpRequest.open("get",url,true);
      xmlHttpRequset.send(null);

也可以使用send方法传递参数。使用send方法传递参数使用的是POST方法，需要设定Content-Type头信息，模拟HTTP POST方法发送一个表单，这样服务器才会知道如何处理上传的内容。参数的提交格式和GET方法中url的写法一样。设置头信息前必须先调用open方法。

 xmlHttpRequest.open("POST","login.jsp",true);
     xmlHttpRequest.setRequestHeder("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");
     xmlHttpRequest.send("user="+username+"&pwd="+password);

问题2 ：如何拼接URL？
例：
http://www.sina.com:8080/news/index.asp?boardID=5&ID=24618&page=1#name
从上面的URL可以看出，一个完整的URL包括以下几部分：

1.协议部分：该URL的协议部分为“http：”，在"HTTP"的后面分隔符为“//”。这代表网页使用的是HTTP协议。在Internet中可以使用多种协议，如HTTP，FTP等等本例中使用的是HTTP协议。
2.域名部分：该URL的域名部分为“www.aspxfans.com”。一个URL中，也可以使用IP地址作为域名使用。
3.端口部分：跟在域名后面的是端口，域名和端口之间使用“:”作为分隔符。端口不是一个URL必须的部分，如果省略端口部分，将采用默认端口。
4.虚拟目录部分：从域名后的第一个“/”开始到最后一个“/”为止，是虚拟目录部分。虚拟目录也不是一个URL必须的部分。本例中的虚拟目录是“/news/”。
5.文件名部分：从域名后的最后一个“/”开始到**“？”为止，是文件名部分，如果没有“?”,则是从域名后的最后一个“/”开始到“#”为止，是文件部分，如果没有“？”和“#”，那么从域名后的最后一个“/”开始到结束，**都是文件名部分。本例中的文件名是“index.asp”。文件名部分也不是一个URL必须的部分，如果省略该部分，则使用默认的文件名。
6.**锚部分：**从“#”开始到最后，都是锚部分。本例中的锚部分是“name”。锚部分也不是一个URL必须的部分。
7.参数部分：从“？”开始到“#”为止之间的部分为参数部分，又称搜索部分、查询部分。本例中的参数部分为“boardID=5&ID=24618&page=1”。参数可以允许有多个参数，参数与参数之间用“&”作为分隔符。这一点对前端拼接URL极为重要。前面几条可以了解，这一条必须记住参数URL中？和&如何使用。

问题3：open()方法是干什么的？

open方法创建一个请求，并准备向服务器发送，
open（method,url,async,user,password)。
method：请求的类型；GET 或 POST
url：文件在服务器上的位置
async 请求是同步还是异步，同步为false，异步为true，默认为true
user 指定请求的用户名，没有就省略。
password 同上。

问题4：判断 xhr.readystate == 4 && xhr.status == 200 根据是什么？

readystate的5种状态，可以据此判断数据请求的进度。
• 0: 请求未初始化
• 1: 服务器连接已建立
• 2: 请求已接收
• 3: 请求处理中
• 4: 请求已完成，且响应已就绪

status的3种常用状态，据此判断是否获得数据。
 200: “OK”
 404: 未找到页面
 503 服务器端有错误

好了，至此，咱们可以通过ajax获得了数据，既然得到数据，就得使用数据，下面就说说ajax如何解析得到的数据。

用原生AJAX实现解析数据

ajax可以使用的数据格式有很多，比如XML、JSON、JSONP、HTML、script、text等，比较常用的是前2种，下面分别介绍他们的解析方式。

1. ajax 对 xml数据的解析

XML数据格式：

<?xml version="1.0" encoding="utf-8"?>
<!-- 这句话必须写上 -->
<bookstore>
	<book>
		<name>三国演义</name>
		<category>文学</category>
		<desc>描述</desc>
	</book>	
	<book>
		<name>水浒传</name>
		<category>文学</category>
		<desc>草寇or英雄豪杰</desc>
	</book>	
	<book>
		<name>西游记</name>
		<category>文学</category>
		<desc>妖魔鬼怪牛鬼蛇神什么都有</desc>
	</book>	
	<book>
		<name>红楼梦</name>
		<category>文学</category>
		<desc>宝哥哥与林妹妹的爱情史</desc>
	</book>	
</bookstore>

解析代码及分析：

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>json文件</title>
<script type="text/javascript">
	window.onload = function(){
		var btn = document.getElementById('btn');
		btn.onclick = function(){
			showBookInfo();
		}
		function showBookInfo(){
			document.getElementById('bookInfo').innerHTML = '';
			var xhr = null;
			if(window.XMLHttpRequest){
				xhr = new XMLHttpRequest();
			}else{
				xhr = new ActiveXObject('Microsoft.XMLHTTP');
			}
			xhr.open('get','./data.xml');
			xhr.send(null);
			xhr.onreadystatechange = function(){
				if(xhr.readyState == 4 && xhr.status == 200){
					var data = xhr.responseXML; //获取XML格式的数据
					var bs = data.getElementsByTagName('bookstore')[0];
					var books = bs.getElementsByTagName('book');
					var tag = ''; //设置一个变量，存放文本内容
					for(var i=0;i<books.length;i++){
						var book = books[i]; //循环获得数据的元素节点，即带标签
						var name = book.getElementsByTagName('name')[0];
						var category = book.getElementsByTagName('category')[0];
						var desc = book.getElementsByTagName('desc')[0];
						tag += '<tr><td>'+getNodeText(name)+'</td><td>'+getNodeText(category)+'</td><td>'+getNodeText(desc)+'</td></tr>';
// 							拼接tag内部的内容，是表格形式
					}
					var tbody = document.createElement('tbody');
					tbody.innerHTML = tag; //把tag赋予tbody
					document.getElementById('bookInfo').appendChild(tbody);
				}
			}		
		}
	}
    //封装一个函数，获取元素节点内容
    function getNodeText(node){
    	if(window.ActiveXObject){//IE
    		return node.text;
    	}else{//标准浏览器
    		if(node.nodeType == 1){ 
    		//如果节点是元素节点，则 nodeType 属性将返回 1。
			//如果节点是属性节点，则 nodeType 属性将返回 2。
    			return node.textContent;
    		}
    	}
    }
</script>
</head>
<body>
	<input type="button" value="点击" id="btn">
	<div>
		<table id="bookInfo">

		</table>
	</div>
</body>
</html>

2.ajax 对 json 数据的解析

Json数据样式：

{
	"total":"4",
	"data":[
		{
			"name":"三国演义",
			"category":"文学",
			"desc":"一个军阀混战的年代"
		},{
			"name":"水浒传",
			"category":"文学",
			"desc":"草寇or英雄好汉"
		},{
			"name":"西游记",
			"category":"文学",
			"desc":"妖魔鬼怪牛鬼蛇神什么都有"
		},{
			"name":"红楼梦",
			"category":"文学",
			"desc":"一个封建王朝的缩影"
		}
	],
	"obj":{"adf":"adf"}
}

解析代码及分析

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>json文件</title>
<script type="text/javascript">
	window.onload = function(){
		var btn = document.getElementById('btn');
		btn.onclick = function(){
			showBookInfo();
		}
		function showBookInfo(){
			var xhr = null; 
			//第一步：创建xhr对象，XMLHttpRequest 对象用于在后台与服务器交换数据。
			if(window.XMLHttpRequest){
				xhr = new XMLHttpRequest();
			}else{
				xhr = new ActiveXObject('Microsoft.XMLHTTP');
			}
			//第二步：准备发送请求，配置请求的一些行为
			xhr.open('get','./data.json');
			//第三步：执行发送请求
			xhr.send(null);
			//第四步：准备请求的回调函数
			xhr.onreadystatechange = function(){
				if(xhr.readyState == 4 && xhr.status == 200){
					var data = JSON.parse(xhr.responseText);
					// JSON.parse() 方法解析一个JSON字符串，构造由字符串描述的JavaScript值或对象。
					// 还可以用eval函数 data = eval("("+ str +")");eval函数有风险，推荐使用json.parse
					var total = data.total;
					var list = data.data; 
					//获取PHP后台data数据
					var tag = '';
					for(var i=0;i<total;i++){
					//循环获取list数据里的每个元素
						var book = list[i]; 
						tag += '<tr><td>'+book.name+'</td><td>'+book.category+'</td><td>'+book.desc+'</td></tr>';
					}
					var tbody = document.createElement('tbody');
					tbody.innerHTML = tag;
					document.getElementById('bookInfo').appendChild(tbody);
				}
			}
		}
	}
</script>
</head>
<body>
	<input type="button" value="点击" id="btn">
	<div>
		<table id="bookInfo">
		</table>
	</div>
</body>
</html>

jQuery的ajax方法

该方法是 jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。

	$("#button").click(function(){
			$.ajax({
				url:"data.php", //请求数据的地址
				dataType:"text", //数据类型
				type:"get",//请求方式
				success:function(data){ //请求成功时的回调函数
					alert(data);
				},
				error:function(e){ //请求失败使回调函数
					console.log(e); 
					//可以在控制台输出错误提示
				}
			});
		});

ajax跨域解决方案

ajax跨域指的是：安全性的问题，浏览器默认不支持请求不是本地或者同一个服务器下面的URI。否则最后会导致虽然请求状态200，但是不会返回任何数据。

哪些属于跨域呢？我们一http://www.example.com/为例进行分析：

这里写图片描述
综上，在请求的一个URL里面，如果协议、域名、端口有一个不同，就跨域了。

Script的src方式加载js文件，然后在服务端输出JSON数据并执行回调函数，从而解决了跨域的数据请求。

<script type="text/javascript" src="./data.js"></script>
/*通过这种方式可以获取其他设备上的文件，包括数据文件*/

这就是经常说的jsonp方式，它不是数据形式而是一种json数据的传输方式。
原生Jsonp方式获取数据：
HTML代码：

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jsonp</title>
</head>
<body>
	<script type="text/javascript">
	function cb(data){
		console.log(data);
	} // 回调函数
	</script>
	<script type="text/javascript" src="jsonp.php?_jsonp=cb"></script>
<!-- 引入PHP文件，注意格式 ，后面要有回调函数的名称-->
</body>
</html>

后台PHP代码：

<?php 
$callback = $_GET['_jsonp'];
$arr = array("1","11","111");
echo $callback."(".json_encode($arr).")";
 ?>

Jquery 的jsonp 方式获取数据

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jquery跨域jsonp</title>
</head>
<body>
<input type="button" id="btn" value="点击">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	$.ajax({
		type : "get",
		async: true,
		url : "./jsonp.php",
		dataType : "jsonp",
		jsonp: "onJsonPLoad",
		//在一个 jsonp 请求中重写回调函数的名字。这个值用来替代在 "callback=?" 这种 GET 或 POST 请求中 URL 参数里的 "callback" 部分，比如 {jsonp:'onJsonPLoad'} 会导致将 "onJsonPLoad=?" 传给服务器。
		jsonpCallback:"cb",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名
		success : function(data){
		    console.log(data);
		},
		error:function(){
		    console.log('fail');
		}
	});
});
</script>
</body>
</html>

ajax 的基础只是目前就这么多，可能有些细节知识没有涉及到，或者有些地方不够全面，以后学习之后会继续汇总进来。