认识ajax

来源：互联网发布：tfboys三只的关系知乎编辑：程序博客网时间：2024/05/18 22:47

认识ajax

AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。

AJAX = 异步 JavaScript和XML（标准通用标记语言的子集）。
AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

ajax的优点

ajax技术解决了很多其它技术解决不了的问题，比如:

(1)页面无刷新的动态数据交换

(2)局部刷新页面【验证用户名唯一】

(3)界面的美观【增强用户体验】

(4)对数据库的操作

(5)可以返回简单的文本格式，也可以返回 xml文件格式, json数据格式。

作用1. 用Ajax进行数据验证

在填写表单内容时，需要保证数据的唯一性（例如新用户注册填写的用户名），因此必须对用户输入的内容进行数据验证。数据验证通常有两种方式：一种是直接填写，然后提交表单，这种方式需要将这个页面提交到服务器端进行验证，整个过程不仅时间长而且造成了服务器不必要的负担；

第二种方式是改进了的验证过程，用户可以通过点击相应的验证按钮，打开新窗口查看验证结果，但是这样需要新开一个浏览器窗口或者对话框要专门编写验证的页面，比较耗费系统资源。
而使用Ajax技术，可以由XMLHttpRequest对象发出验证请求，根据返回的HTTP响应判断验证是否成功，整个过程不需要弹出新窗口，也不需要将整个页面提交到服务器，快速而又不加重服务器负担作用

作用2.按需取数据

分类树或者树形结构在web应用系统中使用得非常广泛，例如部门结构，文档得分类结构常常使用树形空间呈现。
以前每次对分类树得操作都会引起页面重载，为了避免这种情况出现，一般不采用每次调用后台得方式，而是一次性将分类结果中得数据一次性读取出来并写入数组，然后根据用户的操作，用JavaScript来控制节点的呈现，这样虽然解决了操作响应速度，不重复载入页面以及避免向服务器频繁发送请求的问题，但是如果用户不对分类进行操作或者只对分类树中的一部分数据进行操作的话（这种情况很普遍的），那么读取的数据中就会有相当大余，浪费了用户的资源。特别是在分类结构复杂，数据庞大的情况下，这种弊端就更加明显了。
现在应用Ajax改进分类树的实现机制。在初始化页面时，只获取第一级子分类的数据并且显示；当用户点开一级分类的第一节点时，页面会通过Ajax向服务器请求当前分类所属的二级子分类的所有数据；如果再请求已经呈现的二级分类的某一节点时，再次向服务器请求当前分类所属的三级子分类的所有数据，以此类推。页面会根据用户的操作向服务器请求它所需要的数据，这样就不会存在数据的冗余，减少了数据下载总量。同时，更新页面时不需要重载所有内容，只更新需要更新的那部分内容即可，相对于以前后台处理并且重载的方式，大大缩短了用户的等待时间。

作用3.自动更新数据

在web应用中有很多数据的变化时十分迅速的，例如最新的热点新闻，天气预报以及聊天室内容等。在Ajax出现之前，用户为了即使了解相应的内容必须不断刷新页面，查看是否有新的内容变化，或者页面本身实现定时刷新的功能
有可能会发生这种情况；有一段时间网页的内容没有发生任何变化，但是用户并不知道，仍然不断的刷新页面；或者用户失去了耐心，放弃了刷新页面，却很有可能在此有新的消息出现，这样就错过了第一时间得到消息的机会。
应用Ajax可以改善这种这种情况，页面加载以后，会通过Ajax引擎在后台进行定时的轮询，向服务器发送请求，查看是否有最新的消息。如果有则将新的数据（而不是所有数据）下载并且在页面上进行动态的更新，通过一定的方式通

编写过程:

创建ajax对象
ActiveXObject("Microsoft.XMLHTTP")
XMLHttpRequest()
连接服务器
- open(方法, 文件名, 异步传输)
  - 同步和异步
发送请求
- send()
接收返回值

ajax跨域

跨域：跨当然是跨过去，域当然是别的服务器 (就是去别服务器上取东西)

只要协议、域名、端口有任何一个不同，都被当作是不同的域。

AJAX的跨域处理

因为同源策略：浏览器规定只能拿同源资料，但是运用ajax可以跨域去拿别人的资料

一个域名地址是由协议、子域名、主域名、端口号、和请求资源的地址 5个部分组成

当协议、子域名、主域名、端口号中任意一个不相同时，都算作不同域，而两个不同域之间相互请求资源，就算作跨域。

处理跨域方法有三个

第一个：代理

通过在同域名的web服务器端创建一个代理，后台帮写好一个数据接口，前端人员把接口街上就可以用了

一般这个是后台人员弄好，前端人员做的就是把接口接上就可以了。

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body><form action="checkName.php" method="post">用户名：<input type="text" id="username" /><span id="inf"></span><br />密码：<input type="password" /><br /><input type="submit" value="注册"/></form></body><script type="text/javascript">window.onload=function(){function id(id){return document.getElementById(id)}function ajax(){var oAjax;if(window.XMLHttpRequest){oAjax=new XMLHttpRequest();}else{oAjax=new ActiveXObject("Microsoft.XMLHTTP");}return oAjax;}id('username').onkeyup=function(){var xhr=ajax();var url='/ajax5-18/checkName.php?name='+id('username').value;xhr.open('GET',url,true);xhr.send(null);xhr.onreadystatechange=function(){if(xhr.readyState==4){if(xhr.status==200){console.log(xhr.status);id('inf').innerHTML=xhr.responseText;}}}}}</script></html>

运用ajax获取后台数据 ，通过后台给的数据，接上接口，然后验证用户名是否被注册！！！

第二个：JSONP

实现原理：由于使用script标签调用远程js文件没有不受跨域的影响，所以可以通过创建一个script标签，通过src属性来访问远程文件。

 $.ajax({

           type: "POST",//用POST方式传输

           dataType:"json",//数据格式:JSON

           url:"xxx/xxx.ashx",//目标地址

           data:'这里组织json数据'

第三个：处理跨域的方法 -- XHR2

“XHR2” 全称 “XMLHttpRequest Level2” 是HTML5提供的方法，对跨域访问提供了很好的支持，并且还有一些新的功能。

* IE10一下的版本都不支持

* 只需要在服务器端头部加上下面两句代码：

　　header( "Access-Control-Allow-Origin:*" );

　　header( "Access-Control-Allow-Methods:POST,GET" );

XHR2方法案列

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body><form action="checkName.php" method="post">用户名：<input type="text" id="username" /><span id="inf"></span><br />密码：<input type="password" /><br /><input type="submit" value="注册"/></form></body><script type="text/javascript">window.onload=function(){function id(id){return document.getElementById(id)}function ajax(){var oAjax;if(window.XMLHttpRequest){oAjax=new XMLHttpRequest();}else{oAjax=new ActiveXObject("Microsoft.XMLHTTP");}return oAjax;}id('username').onkeyup=function(){var xhr=ajax();var url='/ajax5-18/checkName.php?name='+id('username').value;xhr.open('GET',url,true);xhr.send(null);xhr.onreadystatechange=function(){if(xhr.readyState==4){if(xhr.status==200){console.log(xhr.status);id('inf').innerHTML=xhr.responseText;}}}}}</script></html>

其实浏览器成功发送请求并拿回了数据  只是浏览器的同源策略 禁止了获取  在xhr2 服务器端支持跨域 需要在响应头增加

Access-Control-Allow-Origin: * //*代表任何域。也可以指定地址

Access-Control-Allow-Methods: POST,GET //支持的方法

ajax模板

阅读全文

1 0