AJAX及其相关

一、什么是AJAX

Ajax是一种用于快速创建动态网页的技术,通过在后台与服务器进行少量数据交换,AJAX可以实现网页异步更新,这意味着可以在不加载整个网页的情况下,对网页的某部分进行更新。
传统的网页(不使用AJAX)如果需要更新内容,必须重载整个网页

1、AJAX的原理

ajax的原理简单来说通过XMLHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用JavaScript来操作DOM而更新页面。这其中最关键的异步就是从服务器获得请求数据。要清楚这个过程和原理,我们必须对XMLHttpRequest有所了解。

XMLHttpRequest是AJAX的核心机制,它是在IE5中首先引入的,是一种支持异步请求的技术。简单的说,也就是JavaScript可以及时向服务器提出请求和处理响应,从而不阻塞用户。达到无刷新的效果。

2、AJAX的优点

AJAX不是新的编程语言,而是一种使用现有标准的新方法。
AJAX最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。
AJAX不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上运行。

3、AJAX的缺点

1、AJAX干掉了Back和History功能,即对浏览器机制的破坏。在动态更新页面的情况下,用户无法回到前一个页面状态,因为浏览器仅能记忆历史记录中的静态页面。一个被完整读入的页面与一个已经被动态修改过的页面之间的差别非常微妙;用户通常会希望单击后退按钮能够取消他们的前一次操作,但是在AJAX应用程序中,这将无法实现。
2、安全问题技术同时也对IT企业带来了新的安全威胁,ajax技术就如同企业数据建立了一个直接通道。这使得开发者在不经意间会暴露比以前更多的数据和服务器逻辑。ajax的逻辑可以对客户端的安全扫描技术隐藏起来,允许黑客从远端服务器上建立新的攻击。还有ajax也难以避免一些已知的安全弱点。诸如跨站点脚步攻击、SQL注入攻击和基于credentials的安全漏洞等。
3、对搜索引擎的支持比较弱。如果使用不当,AJAX会增大网络数据的流量,从而降低整个系统的性能。

4、AJAX状态码说明

1**:请求收到,继续处理
2**:操作成功收到,分析、接收
3**:完成此请求必须进一步处理
4**:请求包含一个错误语法或不能完成
5**:服务器执行一个完全有效请求失败

5、AJAX的流程

1、声明Ajax对象xhr,创建XMLHttpRequest实例
IE8以后才有如下声明的方式

var xhr = new XMLHttpRequest();

XMLHttpRequest()是AJAX的原生对象
2、一旦新建实例,就可以使用open()方法发出HTTP请求
填写请求信息,发出HTTP请求
第一个参数:请求方式:get/post
第二个参数:url(统一资源定位符)
第三个参数:true/false true异步,false同步

xhr.open('GET','http://www.baidu.com',true);

3、向服务器发送请求
xhr.send() ,正在发送请求

4、等待数据响应,接收服务器传回的数据

xhr.onreadystatechange = function(){
    
    }

在回调函数中进行请求状态readyState的监控
当readyState等于4且状态为200时,表示响应式内容解析完成,可以在客户端调用了。
返回的内容:
responseText:返回以文本形式存放的内容
responseXML:返回XML形式的内容

5、更新网页数据

6、AJAX中的GET和POST请求

get 一般用来进行查询操作,url地址有长度限制,请求的参数都暴露在url地址当中,如果传递中文参数,需要自己进行编码操作,安全性较低。
post请求方式主要用来提交数据,没有数据长度的限制,提交的数据内容存在于http请求体中,数据不会暴露在url地址中。

GET还是POST?
与post相比,get更简单也更快,并且在大部分情况下都能用
然后,在以下情况中,请使用Post请求:

  • 无法使用缓存文件(跟心服务器上的文件或数据库)
  • 向服务器发送大量数据(post没有数据量限制)
  • 发送包含位置字符的用户输入时,post比get更稳定也更可靠

7、Ajax如何实现跨域

跨域:协议、域名、端口都相同才同域,否则都是跨域
出于安全考虑,服务器不允许ajax跨域获取数据,但是可以跨域获取文件内容,所以基于这一点,可以动态创建script标签,使用标签的src属性访问js文件的形式获取js脚本,并且这个js脚本中的内容是函数调用,该函数调用的参数是服务器返回的数据,为了获取这里的参数数据,需要事先在页面中定义回调函数,在回调函数中处理服务器返回的数据,这就是解决跨域问题的主流解决方案。

猜你喜欢

转载自blog.csdn.net/Rice_w/article/details/128347726
今日推荐