ajax请求的五个步骤是什么(ajax请求的五个方法)

Ajax = 异步 JavaScript 和XML。

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

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

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

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

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

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

1. 建立xmlHttpRequest对象

2. 设置回调函数

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

4. 向服务器发送数据

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

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

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

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

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

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

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

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

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

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

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

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