首页 > 编程学习 > ajax详解(marksheng整合版)

ajax详解(marksheng整合版)

发布时间:2023/1/25 12:44:16

一、简介 

Ajax 即“AsynchronousJavascriptAndXML”(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术。 Ajax = 异步JavaScript和XML(标准通用标记语言的子集)。 Ajax 是一种用于创建快速动态网页的技术。 Ajax 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。 通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。 传统的网页(不使用 Ajax)如果需要更新内容,必须重载整个网页页面。


二、到底什么是 AJAX

再说一遍,就是用 JS 发起一个请求,并得到服务器返回的内容

这跟以前的技术最大的不同点在于「页面没有刷新」,仅此而已。

想要用 JS 发起一个请求很简单,一共 4 步。

1. 创建一个对象

var request = new XMLHttpRequest()

2. 监听请求成功后的状态变化

request.onreadystatechange = function() {if (this.readyState == 4 && this.status == 200) {console.log(request.responseText)}
};

第三行的 request.responseText 就是服务器返回的内容了(默认是字符串)

3. 设置请求参数

request.open("GET", "filename", true);

4. 发送请求

request.send();

这 4 步看起来是有些复杂的,不要紧,jQuery.ajax 对这 4 步进行了封装,只需要一步就可以了:

$.get('filename').then(function(response){// 这里的 response 就是返回的内容
})

 


三、用 AJAX 请求什么?

目前最常见的情况是用 AJAX 请求 JSON 格式的数据,比如:

$.get('/data.php').then(function(response){// response 是 { "name": "小谷" }
})

其实,你可以用 AJAX 请求任何内容,包括

  • XML 内容
  • HTML 内容
  • CSS 内容
  • JavaScript 内容
  • ……

四、XMLHttpRequest分析

参考资料: XMLHttpRequest Level 2 使用指南---阮一峰

回答原理题流程:

  1. 如果是英文词汇就先翻译成中文
  2. 一句话描述该技术的用途
  3. 描述该技术的核心概念或运作流程
  4. 口述该技术的代码书写思路
  5. 该技术的优点
  6. 该技术的缺点
  7. 如何弥补缺点

现在我们正式开始了解XMLHTTPRequest对象,顾名思义:是基于XML的HTTP请求。XMLHttpRequest是一个浏览器接口,使得Javascript可以进行HTTP(S)通信。自从浏览器提供有了XMLHTTPRequest这个接口之后,ajax操作就此诞生。

我们再来说说什么是AJAX,AJAX = Asynchronous JavaScript and XML,翻译为:异步的 JavaScript 和 XML。ajax就是基于浏览器提供的XMLHttpRequest对象来实现的。这下明白他们的关系了吧。

传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面。自从有了ajax之后,我们就可以实现异步的加载网页。

什么叫异步?

异步,异嘛,不同的意思,这里也就是指不跟浏览器加载执行网页代码的步伐一致,也就是说在一个网页中需要用户操作来触发执行代码,而不是整个网页代码一次性执行完毕。(这里的用户操作是指在同一个网页下面请求代码执行渲染,而不是让浏览器直接跳转渲染另一个页面)

AJAX 工作原理:

 

 

这里面都提到了一个概念XML,那什么是XML呢?

XML 指可扩展标记语言(eXtensible Markup Language)。

我们在浏览器中使用XMLHTTPRequest对象在服务器之间通信,传输的数据是使用XML的方式,但最终还是会被转换成json数据格式来被我们使用。

我们再来看看XHR的使用流程:

  • 首先我们需要新建一个XMLHttpRequest实例
var xhr = new XMLHttpRequest();
  • 然后,向远程主机发出一个HTTP请求
xhr.open('GET', 'example.php');
xhr.send();
  • 接着,就等待远程主机做出回应。这时需要监控XMLHttpRequest对象的状态变化,指定回调函数
xhr.onreadystatechange = function(){if ( xhr.readyState == 4 && xhr.status == 200 ) {alert( xhr.responseText );} else {alert( xhr.statusText );}};
  • 上面的代码包含了老版本XMLHttpRequest对象的主要属性:
* xhr.readyState:XMLHttpRequest对象的状态,等于4表示数据已经接收完毕。
* xhr.status:服务器返回的状态码,等于200表示一切正常。
* xhr.responseText:服务器返回的文本数据
* xhr.responseXML:服务器返回的XML格式的数据
* xhr.statusText:服务器返回的状态文本。

老版本的XMLHttpRequest对象有以下几个缺点:

* 只支持文本数据的传送,无法用来读取和上传二进制文件。
* 传送和接收数据时,没有进度信息,只能提示有没有完成。
* 受到"同域限制"(Same Origin Policy),只能向同一域名的服务器请求数据。

以上都是2010年以前使用的出来的过时的XMLHttpRequest对象了,现在我们都基本上使用的是HTML5中的新版本XMLHttpRequest对象

新版本的功能

新版本的XMLHttpRequest对象,针对老版本的缺点,做出了大幅改进。

* 可以设置HTTP请求的时限
* 可以使用FormData对象管理表单数据
* 可以上传文件
* 可以请求不同域名下的数据(跨域请求),CORS。
* 可以获取服务器端的二进制数据
* 可以获得数据传输的进度信息

1】HTTP请求的时限

xhr.timeout = 3000;
xhr.ontimeout = function(event){alert('请求超时!');
}

上面的语句,将最长等待时间设为3000毫秒。过了这个时限,就自动停止HTTP请求。与之配套的还有一个timeout事件,用来指定回调函数。

2】FormData对象

ajax操作往往用来传递表单数据。为了方便表单处理,HTML 5新增了一个FormData对象,可以模拟表单

//首先,新建一个FormData对象。
var formData = new FormData();//然后,为它添加表单项。
formData.append('username', '张三');
formData.append('id', 123456);//最后,直接传送这个FormData对象。这与提交网页表单的效果,完全一样。
xhr.send(formData);

FormData对象也可以用来获取网页表单的值

var form = document.getElementById('myform');
var formData = new FormData(form);
formData.append('secret', '123456'); // 添加一个表单项
xhr.open('POST', form.action);
xhr.send(formData);

3】上传文件

新版XMLHttpRequest对象,不仅可以发送文本信息,还可以上传文件

假定files是一个"选择文件"的表单元素(input[type="file"]),我们将它装入FormData对象。

var formData = new FormData();for (var i = 0; i < files.length;i++) {formData.append('files[]', files[i]);
}xhr.send(formData);

4】跨域资源共享(CORS)

新版本的XMLHttpRequest对象,可以向不同域名的服务器发出HTTP请求。这叫做"跨域资源共享"(Cross-origin resource sharing,简称CORS)。

使用"跨域资源共享"的前提,是浏览器必须支持这个功能,而且服务器端必须同意这种"跨域"。如果能够满足上面的条件,则代码的写法与不跨域的请求完全一样。

跨域之前我们都讲过了,这里就不多提了,其他的新XMLHttpRequest对象的功能,个人觉得日常开发中可能遇到很少,就不去总结了。


五、总结 

ajax:

浏览器的一种局部刷新的技术

只要是JS调用异步通讯组件并使用格式化的数据来更新web页面上的内容或操作过程,那么我们用的方法就可算是AJAX。

 

 


本文链接:https://www.ngui.cc/el/2883551.html
Copyright © 2010-2022 ngui.cc 版权所有 |关于我们| 联系方式| 豫B2-20100000