您的位置 首页 > 娱乐休闲

关于使用原生JavaScript实现ajax技术的简单教程!

引言:在WEB2.0时代,网速还很慢的时候,最烦恼的就是注册登录的时候,如果有其中一个输入错误,提交之后验证不通过,那就要重新填写从新提交。在逛论坛的时候,总是要先刷新页面才能看到新的东西,很不方便,不过现在我们无疑是幸福的,因为有了AJAX技术,我们不在百无聊赖的刷新刷新刷新,本文章就来简单讲解一下如何使用javascript原生语言编写一个完整ajax的使用方法。

声明:本文章只针对有兴趣或者即将有兴趣学习相关知识的同学,文章很基础,大神请自便,文章若有错误,请大家指正。

名词解释:ajax(Asynchronous Javascript And XML)

ajax,也就是异步Javascript和xml,是一种用来创建快速动态网页的技术。在我个人看来,这其实不算是一种技术,准确的说,应该是一种方法,一种提升用户体验的方法。ajax通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。通俗的讲,ajax的作用就是,当你正在浏览或者使用网页的时候,你的网页并不是如你所见一层不变的,而是它在后面对服务器请求需要的数据,并且把它显示在网页里。在整个过程,你是看不到它在跟服务器交流。平时最常见的就是我们的注册登录页面,登录的时候,点击登录,页面明明没有跳转,但是却能提示你用户名和密码错误,注册的时候,我们才刚输入用户名,它就提示你该用户名已经存在,这是为什么?其实就是ajax的功劳,它在你继续使用的网页的时候,已经悄悄的跟服务器联系上了,并且验证了你的信息,还返回提醒了你。整个过程我们就称是异步请求的过程。这就是ajax最经典的应用。下面我们看看怎么使用JavaScript创建一个ajax吧。

创建一个ajax主要分为几个步骤:

1、创建xmlhttpRequest 对象

2、向服务器发送请求

3、服务器接收ajax的请求,接收传过来的数据,处理后返回数据

4、客户端接收数据,完成局部更新网页

创建XMLHttpRequest对象的语法:

variable=new XMLHttpRequest();

如需将请求发送到服务器,我们使用 XMLHttpRequest 对象的 open() 和 send() 方法

xml("GET",";,true); //打开一个跟服务器的连接

xml('data'); //发送数据

这时候已经跟服务器取得联系,接下来就是等待服务器返回数据了,那我们要怎么知道服务器什么时候返回呢,这时候就用到readyState这个属性了,这个属性的值保存了XMLHttpRequest 的状态。

  • 0: 请求未初始化

  • 1: 服务器连接已建立

  • 2: 请求已接收

  • 3: 请求处理中

  • 4: 请求已完成,且响应已就绪

如果readyState==4的时候就代表已经完成所有请求了,这时候写一个回调函数取数据就好了。

取数据语法:

var data=XMLH

这样基本上就完成了一个简单的ajax请求。

注意:以上只是大概介绍了ajax的使用方法,如果真的用到了,还需要去仔细阅读详细文档。因为ajax是与服务器打交道的,所以你至少了解服务器的一些相关知识,比如PHP,Java之类的语言。其实使用原生写ajax麻烦,不方便,早就有人帮我们封装好了,比如jquery,mui等等封装的都比较好用,希望大家明白原生道理后多去了解了解别人的框架。

此头条号不定期分享一些常用的开发方法,与同学们共同学习,共同进步,欢迎大家订阅!!!更多详细,请关注www.i网站。

责任编辑: 鲁达

1.内容基于多重复合算法人工智能语言模型创作,旨在以深度学习研究为目的传播信息知识,内容观点与本网站无关,反馈举报请
2.仅供读者参考,本网站未对该内容进行证实,对其原创性、真实性、完整性、及时性不作任何保证;
3.本站属于非营利性站点无毒无广告,请读者放心使用!

“ajax如何回调后台执行进度”边界阅读