AJAX学习

最新推荐文章于 2024-09-06 22:57:14 发布

ฅQSω[*邱╭

最新推荐文章于 2024-09-06 22:57:14 发布

阅读量183

点赞数 1

文章标签： ajax jquery javascript

本文链接：https://blog.csdn.net/qq_45030898/article/details/120074140

版权

一.AJAX的定义

1.AJAX是什么

即异步的 JavaScript 和 XML，是一种用于创建快速动态网页的技术。

2.与传统Web的比较

传统的Web应用交互由用户触发一个HTTP请求到服务器,服务器对其进行处理后再返回一个新的HTHL页到客户端, 每当服务器处理客户端提交的请求时,客户都只能空闲等待,并且哪怕只是一次很小的交互、只需从服务器端得到很简单的一个数据,都要返回一个完整的HTML 页,而用户每次都要浪费时间和带宽去重新读取整个页面。这个做法浪费了许多带宽，由于每次应用的交互都需要向服务器发送请求，应用的响应时间就依赖于服务器的响应时间。这导致了用户界面的响应比本地应用慢得多。
与此不同，AJAX应用可以仅向服务器发送并取回必需的数据，它使用SOAP或其它一些基于XML的Web Service接口，并在客户端采用JavaScript处理来自服务器的响应。因为在服务器和浏览器之间交换的数据大量减少，结果我们就能看到响应更快的应用。同时很多的处理工作可以在发出请求的客户端机器上完成，所以Web服务器的处理时间也减少了。

3.AJAX的工作原理

Ajax的工作原理相当于在用户和服务器之间加了—个中间层(AJAX引擎),使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等需要ajax局部刷新的都交给 Ajax引擎自己来做, 只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求，浏览器接受返回数据。

4.AJAX的优缺点

(1).AJAX的优点
<1>.无刷新更新数据。
AJAX最大优点就是能在不刷新整个页面的前提下与服务器通信维护数据。这使得Web应用程序更为迅捷地响应用户交互，并避免了在网络上发送那些没有改变的信息，减少用户等待时间，带来非常好的用户体验。
<2>.异步与服务器通信。
AJAX使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力。优化了Browser和Server之间的沟通，减少不必要的数据传输、时间及降低网络上数据流量。
<3>.前端和后端负载平衡。
AJAX可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，AJAX的原则是“按需取数据”，可以最大程度的减少冗余请求和响应对服务器造成的负担，提升站点性能。
<4>.基于标准被广泛支持。
AJAX 基于标准化的并被广泛支持的技术，不需要下载浏览器插件或者小程序，但需要客户允许JavaScript在浏览器上执行。随着Ajax的成熟，一些简化 Ajax使用方法的程序库也相继问世。同样，也出现了另一种辅助程序设计的技术，为那些不支持JavaScript的用户提供替代功能。
<5>.界面与应用分离。
Ajax使WEB中的界面与应用分离（也可以说是数据与呈现分离），有利于分工合作、减少非技术人员对页面的修改造成的WEB应用程序错误、提高效率、也更加适用于现在的发布系统。

(2).AJAX的缺点
<1>.AJAX干掉了Back和History功能，即对浏览器机制的破坏。
在动态更新页面的情况下，用户无法回到前一个页面状态，因为浏览器仅能记忆历史记录中的静态页面。一个被完整读入的页面与一个已经被动态修改过的页面之间的差别非常微妙；用户通常会希望单击后退按钮能够取消他们的前一次操作，但是在Ajax应用程序中，这将无法实现。
后退按钮是一个标准的web站点的重要功能，但是它没法和js进行很好的合作。这是Ajax所带来的一个比较严重的问题，因为用户往往是希望能够通过后退来取消前一次操作的。那么对于这个问题有没有办法？答案是肯定的，用过Gmail的知道，Gmail下面采用的Ajax技术解决了这个问题，在Gmail下面是可以后退的，但是，它也并不能改变Ajax的机制，它只是采用的一个比较笨但是有效的办法，即用户单击后退按钮访问历史记录时，通过创建或使用一个隐藏的IFRAME来重现页面上的变更。（例如，当用户在Google Maps中单击后退时，它在一个隐藏的IFRAME中进行搜索，然后将搜索结果反映到Ajax元素上，以便将应用程序状态恢复到当时的状态。）
但是，虽然说这个问题是可以解决的，但是它所带来的开发成本是非常高的，并与Ajax框架所要求的快速开发是相背离的。这是Ajax所带来的一个非常严重的问题。
一个相关的观点认为，使用动态页面更新使得用户难于将某个特定的状态保存到收藏夹中。该问题的解决方案也已出现，大部分都使用URL片断标识符（通常被称为锚点，即URL中#后面的部分）来保持跟踪，允许用户回到指定的某个应用程序状态。（许多浏览器允许JavaScript动态更新锚点，这使得Ajax应用程序能够在更新显示内容的同时更新锚点。）这些解决方案也同时解决了许多关于不支持后退按钮的争论。
<2>.AJAX的安全问题。
AJAX 技术给用户带来很好的用户体验的同时也对IT企业带来了新的安全威胁，Ajax技术就如同对企业数据建立了一个直接通道。这使得开发者在不经意间会暴露比以前更多的数据和服务器逻辑。Ajax的逻辑可以对客户端的安全扫描技术隐藏起来，允许黑客从远端服务器上建立新的攻击。还有Ajax也难以避免一些已知的安全弱点，诸如跨站点脚步攻击、SQL注入攻击和基于Credentials的安全漏洞等等。
<3>.对搜索引擎支持较弱。
对搜索引擎的支持比较弱。如果使用不当，AJAX会增大网络数据的流量，从而降低整个系统的性能。
<4>.破坏程序的异常处理机制。
至少从目前看来，像Ajax.dll，Ajaxpro.dll这些Ajax框架是会破坏程序的异常机制的。关于这个问题，曾在开发过程中遇到过，但是查了一下网上几乎没有相关的介绍。后来做了一次试验，分别采用Ajax和传统的form提交的模式来删除一条数据……给我们的调试带来了很大的困难。
<5>.违背URL和资源定位的初衷。
例如，我给你一个URL地址，如果采用了Ajax技术，也许你在该URL地址下面看到的和我在这个URL地址下看到的内容是不同的。这个和资源定位的初衷是相背离的。
<6>.AJAX不能很好支持移动设备。
一些手持设备（如手机、PDA等）现在还不能很好的支持Ajax，比如说我们在手机的浏览器上打开采用Ajax技术的网站时，它目前是不支持的。
<7>.客户端过肥，太多客户端代码造成开发上的成本。
编写复杂、容易出错；冗余代码比较多（层层包含js文件是AJAX的通病，再加上以往的很多服务端代码现在放到了客户端）；破坏了Web的原有标准。

5.AJAX的适用场景

1、Ajax的适用场景

1) 用Ajax进行数据验证

在填写表单内容时，有时需要保证数据的唯一性，如新用户注册填写的用户名，因此必须对用户输入的内容进行数据验证。
使用Ajax技术，可以由XMLHttpRequest对象发出验证请求，根据返回的HTTP响应判断验证是否成功，整个过程不需要弹出新窗口，也不需要将整个页面提交到服务器，快速而又不加重服务器负担。

2) 用Ajax自动更新页面

对于数据实时变化的web应用中，如热点新闻，天气预报等，在Ajax出现之前，用户为了及时了解最新内容，必须不断刷新页面，或页面本身实现定时刷新的功能。这可能会发生两种情况：

①　某段时间网页的内容没有发生任何变化，但用户并不知道，仍然不断刷新页面；

②　某段时间网页的内容已经发生任何变化，但用户失去了耐心，放弃了刷新页面，得不到最新的数据。
使用Ajax技术，可以通过Ajax引擎在后台进行定时轮询，向服务器发送请求，查看是否有最新数据，若有则将最新数据（不是所有数据）下载并在页面上进行动态更新，通过JavaScript等方式通知用户。这样既避免了用户不断手工刷新页面，也不会因为重复刷新页面造成资源浪费。

2、Ajax的不适用场景

1) 需要使用后退按钮来查看历史搜索

Ajax会破坏浏览器后退按钮的正常行为，在动态更新页面的情况下，用户无法回到前一个页面状态，因为浏览器仅能记下历史记录中的静态页面，因此用户无法通过后退按钮获得前一次或前几次的搜索结果。

2) 部分简单的表单

一个内容简单的表单（如评论表单），或提交订单，或一次性的很少用到的表单都不应该使用以Ajax驱动的表单提交机制，极少能从Ajax得到明显的改善。

3) 需要更新大量信息

Ajax可以不用整页刷新来动态更新页面中改变的一小部分，但如果页面上的大部分内容都需要更新，完全可以从服务器那里获得一个新页面。

二.实现AJAX的步骤

1、创建ajax对象

老规矩，直接new一个对象

var xhr=new XMLHttpRequest()

兼容写法：

function ajax() {
				if (window.XMLHttpRequest) {
					var ajax;
					try {
						ajax = new XMLHttpRequest
					} catch (e) {

						console.log(e)

					}
				} else if (window.ActiveXObject()) {
					try {
						var version = ['Microsoft.XMLHTTP',
							'MSXML.XMLHTTP',
							'MSXML2.XMLHTTP.3.0',
							'Msxml2.XMLHTTP.4.0',
							'Msxml2.XMLHTTP.5.0',
							'Msxml2.XMLHTTP.6.0',
							'Msxml2.XMLHTTP.7.0'
						]
						for (vari = 0; i < version.length; i++) {
							ajax = new ActiveXObject(version[i])
						}
					} catch (e) {

						console.log(e)

					}
				}
				return ajax
			}

2、发起http请求

get请求：

ajax.open('get','请求的url地址(?key=value&key1=value1)',true);
//open()第三个参数为是否异步，值一般为Boolean值   true 异步(一般都是true，毕竟ajax本身就是异步刷新)   false 同步
 //get采用url将发送的数据传送到服务器端,但是不能省略send()方法
ajax.send(null);

post请求：

post请求需要设置请求头，常见的四种post提交数据的content-type的类型

1.application/x-www-form-urlencoded

传递键值对 send("name=lisi&age=20")

2.multipart/form-data

表单上上传文件

3.application/json

传递json字符串,大多和JSON.stringigy()搭配使用

4.text/xml

使用 HTTP 作为传输协议，XML 作为编码方式的远程调用规范

代码示例：

ajax.open('post','2.php',true);
// 设置请求头
ajax.setRequestHeader("content-type","application/x-www-form-urlencoded"); //请求头不同，传的数据也肯定不同
// 发送数据
ajax.send("name=lisi&age=20");

3、监听状态改变

监听状态监听的是readyState和state

readyState：

0	请求未初始化（在调用 open() 之前）
1	请求已提出（调用 send() 之前）
2	请求已发送（这里通常可以从响应得到内容头部）
3	请求处理中（响应中通常有部分数据可用，但是服务器还没有完成响应）
4	请求已完成（可以访问服务器响应并使用它，一般监听这个状态码）

常见的http状态码：常见的HTTP状态码 - xflonga - 博客园,挺完全的

xhr.onreadystatechange = function(){
    if(xhr.readyState == 4 && xhr.status == 200){
       /* 根据自己的业务需求写相关代码*/				   
    }
}

4、接收服务器响应的数据

xhr.responseText //服务器返回的数据

可能还是有点乱对吧，小总结下

function Ajax(){       //创建ajax对象方法
		var ajax;
		if(window.XMLHttpRequest){
			try{
				ajax=new XMLHttpRequest()
			}catch(e){
				console.error(e)						
					}
				}
			else if(window.ActiveXObject()){
				try{
					var version = [
					'Microsoft.XMLHTTP',
					'MSXML.XMLHTTP',
					'MSXML2.XMLHTTP.3.0',
					'Msxml2.XMLHTTP.4.0',
					'Msxml2.XMLHTTP.5.0',
					'Msxml2.XMLHTTP.6.0',
					'Msxml2.XMLHTTP.7.0'
						]
					for(var i=0;i<version.length;i++){
						ajax = new ActiveXObject(version[i])
						}
						
					}catch(e){
						console.error(e)
					}
				}
				return ajax;
			}

	         var ajax=  Ajax()
	          //post请求
			ajax.open('POST','postdata.php',true)
			//设置请求头
			ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
			ajax.send("name='zhangsan'&age=18")
			ajax.onreadystatechange = function(){
				  //判断 (服务端返回了所有的结果)
				   if(ajax.readyState === 4){
				      //判断响应状态码 200  404  403 401 500
				      // 2xx 成功
				      if(ajax.status >= 200 && ajax.status < 300){
				            console.log(ajax.response)
				         }else{
				
				                    }
				                }
				            }

5、渲染页面

三.解决同源策略,实现跨域

1.同源策略

同源策略是一个重要的安全策略，它用于限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档，减少可能被攻击的媒介。

例如我本地请求百度的url，会报错

什么是同源呢？

域名、协议、端口完全一致即为同源。只要有一个不同，就是跨域。

2.解决方法

只要是域名不同的访问就是跨域，如何解决他呢？

1.前端调用url为后端的php，后端php的任务就是访问不同源网站拔取数据

2.前端自己解决的话

<button>点击</button>
		<!-- 1.原生js使用script标签跨域 -->
		<!-- 	<script type="text/javascript">
			var btn =document.getElementsByTagName('button')[0]
			var head=document.querySelector('head')
			btn.onclick=function(){
				console.log(111)
				var tag=document.createElement('script')
				head.appendChild(tag)
				tag.src=''
			}
			
		</script> -->
		<!-- /* 2.jquery使用jsonp */ -->
		<script src="jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
		$(function(){
			$('button').click(function(){
				$.ajax({
					url:'http://v.juhe.cn/joke/content/list.php',
					type:'get',
					dataType:'jsonp',
					data:{
						key:'c41ad3d93efadae9e2032a422a2d3acf',
						page:1,
						pagesize:10,
						sort:'asc',
						time:1418745237
					},
					// jsonp:'callback',
					success:function(data){
						console.log(data)
					},
					error:function(err){
						console.error(err)
					}
				})
			})
		})
		</script>

四.AJAX小例子

准备条件：Apache服务器

前端核心代码：

		<script src="jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script>
		// 出现同源策略错误 ：浏览器会有一个保护机制，禁止去访问不同域的内容  
			$(function(){
				$.ajax({
					url:'data.php',
					type:'get',
					data:{
						key:'c41ad3d93efadae9e2032a422a2d3acf',	
//申请的聚合数据在线笑话key
					},
					success:function(data){
						// console.log(data)
						var res = JSON.parse(data)
						console.log(res)
					},
					error:function(error){
						console.error(error)
					}
				})
			})
		</script>

后台data.php:

<?php
//请求的接口URL
$apiUrl = 'http://v.juhe.cn/joke/randJoke.php';

//请求参数
$params = [
    'key' => $_GET['key'],
];
//参数数组转换成字符串
$paramsString = http_build_query($params);

//发起接口网络请求
$response = null;
try {
    $response = juheHttpRequest($apiUrl, $paramsString, 1);
} catch (Exception $e) {
    echo json_encode($e);
    //此处根据自己的需求进行具体的异常处理
}
if (!$response) {
    echo '请求异常' . PHP_EOL;
}
//接收接口返回内容
$result = json_decode($response, true);
if (!$result) {
    echo '请求异常' . PHP_EOL;
}
$errorCode = $result['error_code'];
if ($errorCode == 0) {
    $data = $result['result'];
} else {
    echo "请求异常：{$errorCode}_{$result['reason']}" . PHP_EOL;
}
//打印接口返回结果
echo json_encode($result);

/**
 * 发起网络请求函数
 * @param String $url 请求的URL
 * @param bool $params  请求的参数内容
 * @param int $isPost   是否POST请求
 * @return bool|string  返回内容
 */
function juheHttpRequest($url, $params = false, $isPost = 0)
{
    $httpInfo = [];
    $ch = curl_init();

    curl_setopt($ch, CURLOPT_HTTP_VERSION, CURL_HTTP_VERSION_1_1);
    curl_setopt($ch, CURLOPT_USERAGENT,  'Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2272.118 Safari/537.36');
    curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 3);
    curl_setopt($ch, CURLOPT_TIMEOUT, 12);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    if ($isPost) {
        curl_setopt($ch, CURLOPT_POST, true);
        curl_setopt($ch, CURLOPT_POSTFIELDS, $params);
        curl_setopt($ch, CURLOPT_URL, $url);
    } else {
        if ($params) {
            curl_setopt($ch, CURLOPT_URL, $url . '?' . $params);
        } else {
            curl_setopt($ch, CURLOPT_URL, $url);
        }
    }
    $reponse = curl_exec($ch);
    if ($reponse === FALSE) {
        // echo "cURL Error: ".curl_error($ch);
        return false;
    }
    $httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
    $httpInfo = array_merge($httpInfo, curl_getinfo($ch));
    curl_close($ch);
    return $reponse;
}


?>

Apache服务器下发送请求，结果：

返回了数据，这只是个小例子。这算是ajax的基本知识点，不足的请补充纠正。

第三篇文章了

ฅQSω[*邱╭

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AJAX学习

目录一.AJAX的定义1.AJAX是什么2.与传统Web的比较3.AJAX的工作原理4.AJAX的优缺点5.AJAX的适用场景二.实现AJAX的步骤1、创建ajax对象2、发起http请求3、监听状态改变4、接收服务器响应的数据5、渲染页面三.解决同源策略,实现跨域1.同源策略2.解决方法四.AJAX小例子一.AJAX的定义1.AJAX是什么即异步的 JavaScript 和 XML，是一种用于创建快速动态网页...
复制链接

扫一扫