德胜云资讯,添加一些关于程序相关的内容,仅供大家学习交流(https://www.wxclwl.com)
日期:2023/03/17 17:53作者:韩宁政人气:
Ajax = 异步 javascript 和XML。
Ajax是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换,Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
传统的网页(不使用 Ajax)如果需要更新内容,必须重载整个网页面
前面谈到ajax是什么,其主要也就是异步提交,大家是否知道同步和异步提交的区别吗?
同步提交:当用户发送请求时,当前页面不可以使用,服务器响应页面到客户端,响应完成,用户才可以使用页面。异步提交:当用户发送请求时,当前页面还可以继续使用,当异步请求的数据响应给页面,页面把数据显示出来 。客户端发送请求,请求交给xhr,xhr把请求提交给服务,服务器进行业务处理,服务器响应数据交给xhr对象,xhr对象接收数据,由javascript把数据写到页面上,如下图所示:
1. 建立xmlHttpRequest对象
2. 设置回调函数
3. 使用open方法与服务器建立链接
4. 向服务器发送数据
5. 在回调函数中针对不同的响应状态进行处理
XMLHttpRequest 是 AJAX 的基础,所有现代浏览器(IE7+、Firefox、Chrome、Safari 以及 Opera)均内建 XMLHttpRequest 对象。那么我们下面来创建一个ajax对象
const instance = new XMLHttpRequest();
这样我们就创建了一个用于进行ajax交互的对象。
当然我们这儿提及一下老版本的ie5、ie6的javascript对象都是使用ActiveX来实现的标准,所以没有XMLHttpRequest对象。他们创建一个对象使用这种方式
const instance = new ActiveXObject("Microsoft.XMLHTTP");
其实我们了解一下就行了,这块在你的代码也不用加上了,现在所有的网站应该都放弃了对低版本ie的支持,这个已经退出了历史舞台,了解一下情况即可。
首先来看一下XMLHttpRequest如何发送一个请求到服务器
const instance = new XMLHttpRequest(); instance.open(method,url,async); instance.send();这里用到了两个方法,第一个open方法其实是配置ajax必要的信息,第二个send才是真正的发起请求到服务器。
当请求被发送到服务器时,我们需要执行一些基于响应的任务,每当 readyState 改变时,就会触发 onreadystatechange 事件,readyState 属性存有 XMLHttpRequest 的状态信息。
那么如何去解决这个跨域呢,通用的有几种方法,但是核心都是需要服务器去配合处理跨域,前端自己无法处理跨域。
第一个采用JsonP方法,这个方法其实也是需要后台去配合处理,由后台来进行请求,然后将数据拼装在一个json对象返回到前台,然后前台通过callback函数来进行操作。这个也比较繁琐。
第二种就是服务端去放一个跨域文件crossdomain.xml放置到服务器端,然后写上可以跨域的ip地址。
第三种配置反向代理服务器,通过代理服务器我们也其实是代理服务器去请求外围,然后转发到我们的服务器上。这样也可以防止跨域。
以上就是AJAX的知识总结,最后也推荐大家观看ajax的视频去学习,对于新手更易理解吸收,动力节点的Ajax学习教程,通过对ajax的传统使用方式,结合json操作的方式,结合跨域等高级技术的方式,对ajax做一个全面的讲解。
http://www.bjpowernode.com/?toutiaoajax