当前位置:首页 > 技术 >

ajax的五个步骤(ajax的五步使用法)

来源:原点资讯(www.yd166.com)时间:2023-03-12 08:45:59作者:YD166手机阅读>>

首先,我们来回顾下ajax是什么?

Ajax = 异步 JavaScript 和XML。

Ajax是一种用于创建快速动态网页的技术。

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

传统的网页(不使用 Ajax)如果需要更新内容,必须重载整个网页面

前面谈到ajax是什么,其主要也就是异步提交,大家是否知道同步和异步提交的区别吗?

  • 同步提交:当用户发送请求时,当前页面不可以使用,服务器响应页面到客户端,响应完成,用户才可以使用页面。
  • 异步提交:当用户发送请求时,当前页面还可以继续使用,当异步请求的数据响应给页面,页面把数据显示出来 。
Ajax工作原理

客户端发送请求,请求交给xhr,xhr把请求提交给服务,服务器进行业务处理,服务器响应数据交给xhr对象,xhr对象接收数据,由javascript把数据写到页面上,如下图所示:

ajax的五个步骤,ajax的五步使用法(1)

Ajax请求的五个步骤:

//第一步,创建XMLHttpRequest对象 var xmlHttp = new XMLHttpRequest(); function CommentAll() { //第二步,注册回调函数 xmlHttp.onreadystatechange =callback1; //{ // if (xmlHttp.readyState == 4) // if (xmlHttp.status == 200) { // var responseText = xmlHttp.responseText; // } //} //第三步,配置请求信息,open(),get //get请求下参数加在url后,.ashx?methodName = GetAllComment&str1=str1&str2=str2 xmlHttp.open("post", "/ashx/myzhuye/Detail.ashx?methodName=GetAllComment", true); //post请求下需要配置请求头信息 //xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); //第四步,发送请求,post请求下,要传递的参数放这 xmlHttp.send("methodName = GetAllComment&str1=str1&str2=str2");//" } //第五步,创建回调函数 function callback1() { if (xmlHttp.readyState == 4) if (xmlHttp.status == 200) { //取得返回的数据 var data = xmlHttp.responseText; //json字符串转为json格式 data = eval(data); $.each(data, function(i, v) { alert(v); }); } } //后台方法 public void GetAllComment(HttpContext context) { //Params可以取得get与post方式传递过来的值。 string methodName = context.Request.Params["methodName"]; //QueryString只能取得get方式传递过来的值。 string str1 = context.Request.Form["str1"]; //取得httpRequest传来的值,包括get与post方式 string str2 = context.Request["str2"]; List comments = new List(); comments.Add(methodName); comments.Add(str1); comments.Add(str2); //ajax接受的是json类型,需要把返回的数据转给json格式 string commentsJson = new JavaScriptSerializer().Serialize(comments); context.Response.Write(commentsJson); }

1. 建立xmlHttpRequest对象

2. 设置回调函数

3. 使用open方法与服务器建立链接

4. 向服务器发送数据

5. 在回调函数中针对不同的响应状态进行处理

AJAX是有很多用处的,接下来给大家介绍AJAX需要掌握的几个功能点:1. 创建原生Ajax对象

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的支持,这个已经退出了历史舞台,了解一下情况即可。

2. Ajax发送请求

首先来看一下XMLHttpRequest如何发送一个请求到服务器

const instance = new XMLHttpRequest(); instance.open(method,url,async); instance.send();

这里用到了两个方法,第一个open方法其实是配置ajax必要的信息,第二个send才是真正的发起请求到服务器。

3. Ajax通过readyState状态的变化接收服务器响应

当请求被发送到服务器时,我们需要执行一些基于响应的任务,每当 readyState 改变时,就会触发 onreadystatechange 事件,readyState 属性存有 XMLHttpRequest 的状态信息。

4. 进级苦恼之跨域请求跨域是所有前端都必须去面对的一个棘手的问题,当你去请求其他服务器的资源时,浏览器安全限制会阻止该请求。你的请求不会到底服务器,被浏览器阻止了,这也是遵循了同源策略。

那么如何去解决这个跨域呢,通用的有几种方法,但是核心都是需要服务器去配合处理跨域,前端自己无法处理跨域。

第一个采用JsonP方法,这个方法其实也是需要后台去配合处理,由后台来进行请求,然后将数据拼装在一个json对象返回到前台,然后前台通过callback函数来进行操作。这个也比较繁琐。

第二种就是服务端去放一个跨域文件crossdomain.xml放置到服务器端,然后写上可以跨域的ip地址。

第三种配置反向代理服务器,通过代理服务器我们也其实是代理服务器去请求外围,然后转发到我们的服务器上。这样也可以防止跨域。


以上就是AJAX的知识总结,最后也推荐大家观看ajax的视频去学习,对于新手更易理解吸收,动力节点的Ajax学习教程,通过对ajax的传统使用方式,结合json操作的方式,结合跨域等高级技术的方式,对ajax做一个全面的讲解。

http://www.bjpowernode.com/?toutiaoajax

栏目热文

ajax的主要用途(ajax在什么情况下使用)

ajax的主要用途(ajax在什么情况下使用)

十二、Ajax12.1 概述AJAX (Asynchronous JavaScript And XML) :异步的 Ja...

2023-03-12 09:08:12查看全文 >>

美国为什么很少阅兵(美国阅兵多少年一次)

美国为什么很少阅兵(美国阅兵多少年一次)

阅兵是一个国家进行实力展示的重要方式,很多国家在重大纪念日里面都会进行大阅兵,威武整齐的受阅部队和先进的武器装备非常的震...

2023-03-12 09:04:14查看全文 >>

退休人员可申请公租房(退休人员无房可申请公租房)

退休人员可申请公租房(退休人员无房可申请公租房)

申请人应年满18周岁,在主城区有稳定工作和收入来源,具有租金支付能力,符合政府规定收入限制的无住房人员、家庭人均住房建筑...

2023-03-12 08:44:12查看全文 >>

已退休的老人怎样申请公租房(退休金超过多少不能住廉租房)

已退休的老人怎样申请公租房(退休金超过多少不能住廉租房)

养老金:又名退休金,是中国的一种社会养老保险待遇。按照国家有关文件规定,养老金定义为在劳动者年老或丧失劳动能力后,根据他...

2023-03-12 08:56:10查看全文 >>

退休无房可申请公租房吗(退休了无房能长期租公租房么)

退休无房可申请公租房吗(退休了无房能长期租公租房么)

随着我国住房政策的不断完善,现在各大城市所提供的公租房可是越来越多了,而且申请公租房的门槛也在持续降低。这样所带来的结果...

2023-03-12 09:00:45查看全文 >>

ajax有什么用(Ajax主要能实现什么功能)

ajax有什么用(Ajax主要能实现什么功能)

在分享今天的这个知识点之前先回顾一下使用ajax的目的:实现异步请求,客户端发送的请求携带数据到达服务器,服务器接收到请...

2023-03-12 08:53:31查看全文 >>

什么是ajax技术(ajax都有什么技术)

什么是ajax技术(ajax都有什么技术)

1.什么是ajax技术ajax技术的中文意思为:异步js和xml.所以其实ajax是有两种老技术共同开出了一朵鲜花.①什...

2023-03-12 09:12:22查看全文 >>

什么是ajax作用是什么(ajax具体指什么)

什么是ajax作用是什么(ajax具体指什么)

关注我,带你了解java一、AJAX简介1.什么是AJAX?AJAX = 异步 JavaScript 和 XML。AJA...

2023-03-12 09:11:49查看全文 >>

axios和ajax哪个好

axios和ajax哪个好

ajax优点1. 页面无刷新更新数据∶AJAX最大优点就是能在不刷新整个页面的前提下与服务器通信维护数据。这使得Web应...

2023-03-12 09:27:16查看全文 >>

ajax与jquery的关系

ajax与jquery的关系

作者:ConardLi来源:code秘密花园jQuery 于 2006 年推出,当时 Ajax 一词正炒的火热。Ajax...

2023-03-12 09:15:10查看全文 >>

文档排行