一篇文章带你了解Ajax
Posted patrick-d
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了一篇文章带你了解Ajax相关的知识,希望对你有一定的参考价值。
概念
Ajax 即“Asynchronous javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术。
Ajax的核心: XMLHttpRequest 对象 是Ajax的核心,一般称之为XHR对象。XHR对象在客户端与服务器之间充当中间人的角色。客户端发送的http请求将由XHR代为转发给服务器,服务器处理完http请求后将响应结果返回给XHR,XHR再返回给客户端。这个过程可以理解为发快递。XHR为快递公司,客户端A和服务器B为用户。A通过快递公司将包裹发送给B,B收到包裹后对包裹进行相应的处理并通过快递公司再发回给A,其中快递公司不用知道包裹被怎么处理了
Ajax能做些什么呢?
AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。利用这种技术我们可以很方便的跟服务器进行通信,并且无需刷新页面。因为衍生了以下应用
1.验证用户名或用户密码
想必大家都有注册账户的经历吧,注册账户时通常需要用户名、密码。而有些账户用户名是不可重复的,也就是别人使用了的用户名你不可以再使用。神奇的事情来了,在你输入完用户名之后,浏览器马上就能知道用户名是否重复。Ajax就可以实现这样的功能。
使用Ajax
下面进入干货教程,一般来说Ajax的请求分为5个步骤,在这里我将合并2个步骤变为。
1.创建一个XMLHttpRequest 对象;
2.使用open()方法与服务器进行连接
3.设置回调函数并在回调函数中对响应结果进行处理
4.向服务器发送数据
1.创建一个XMLHttpRequest 对象
通常我们将这个步骤封装成一个函数,如下:
function createXHR(){ if(window.XMLHttpRequest){ //现代浏览器创建的对象(IE7+,chrom,firefox,opera,safari) return new XMLHttpRequest(); }else{ //IE5,IE6浏览器创建对象 return new ActiveXObject("Microsoft.XMLHttpRequest"); } }
var xhr = createXHR(); //创建对象
2.使用open()方法与服务器进行连接
xhr.open("get","url",true);
get为请求方法。
url为请求地址。
true为异步请求。
3.设置回调函数并在回调函数中对响应结果进行处理
xhr.onreadystatechange = function(){ if(xhr.readyState==4 && xhr.status==200){ respText = xhr.responseText; //对响应结果respText的处理代码 } }
onreadystatechange事件是在readyState属性发生改变时触发的
readyState是XMLHttpRequest的状态,其有5个状态
- 0: 请求未初始化
- 1: 服务器连接已建立
- 2: 请求已接收
- 3: 请求处理中
- 4: 请求已完成,且响应已就绪
status是http状态码
4.向服务器发送数据
send(null);//请求方法为get时
以上是关于一篇文章带你了解Ajax的主要内容,如果未能解决你的问题,请参考以下文章