ajax请求的五个步骤(ajax常见面试题)

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

Ajax =异步JavaScript和XML。

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

Ajax可以通过在后台与服务器交换一点数据，使网页异步更新。这意味着您可以更新网页的某些部分，而无需重新加载整个网页。

如果需要更新内容，传统的web页面(没有Ajax)必须重新加载整个web页面。

说到ajax，主要是异步提交。你知道同步和异步提交的区别吗？

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

客户端发送请求，请求交给xhr，xhr将请求提交给服务，服务器处理业务。服务器响应数据并将其交给xhr对象，xhr对象接收数据并通过javascript将其写入页面，如下图所示:

Ajax请求的五个步骤：

//第一步创建XMLHttpRequest对象var xmlHttp = new XMLHttpRequest()；function comment(){//第二步，注册回调函数xmlhttp . onreadystatechange = callback 1；//{//if(xmlhttp . ready state = = 4)//if(xmlhttp . status = = 200){//var responseText = xmlhttp . responseText；//}/}//第三步，配置请求信息，open()，get//get请求下的参数添加到url，。ashx？method name = getall comment & str 1 = str 1 & str 2 = str 2 xmlhttp . open(& # 34；邮政& # 34；, "/ashx/myzhuye/Detail.ashx？methodName = GetAllComment & # 34，真)；//请求头信息需要在//post请求下配置。//xmlhttp . setrequestheader(& # 34；内容类型& # 34；, "application/x-www-form-urlencoded & # 34；);//第四步，发送请求。在post请求下，把要传递的参数放在这个xmlhttp . send(& # 34；method name = getall comment & str 1 = str 1 & str 2 = str 2 & # 34；);//"}//第五步，创建回调函数function callback 1(){ if(xmlhttp . ready state = = 4)if(xmlhttp . status = = 200){//获取返回数据var data = xmlHttp.responseText//json字符串转换成json格式data = eval(data)；$.每个(数据，函数(I，v){ alert(v)；});} }//后台方法public void getall comment(httpContext context){//params可以获取get和post传递的值。string methodName =上下文。request . Params[& # 34；methodName & # 34];//QueryString只能获取get传递的值。string str1 =上下文。申请表[& # 34；str1 & # 34];//从httpRequest获取值，包括get和post方法字符串str 2 = context . request[& # 34；str2 & # 34];列表评论=新列表()；评论。add(method name)；评论。添加(str 1)；评论。添加(str 2)；//ajax接受json类型，所以需要将返回的数据转换为json格式字符串注释JSON = new JavaScript serializer()。连载(评论)；语境。response . Write(comments JSON)；}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 ActiveX object(& # 34；微软。XMLHTTP & # 34);

其实我们只需要了解一下，这一块不需要加到你的代码里。现在所有网站应该都已经放弃了对ie较低版本的支持，这一家退出了历史舞台。只是了解一下情况。

2. Ajax发送请求

我们先来看看XMLHttpRequest是如何向服务器发送请求的。

const instance = new XMLHttpRequest()；instance.open(方法、url、异步)；instance . send()；这里使用了两种方法。第一个open方法实际上是配置ajax的必要信息，第二个send方法是对服务器的真正请求。

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

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

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

那么这个跨域怎么解决呢？一般的方法有几种，但核心是需要服务器来处理跨域，前端无法自己处理跨域。

第一种采用的是JsonP方法，实际上是需要后台配合处理，后台发出请求，然后将数据组装在一个json对象中返回给前台，再由前台通过回调函数进行操作。这也很复杂。

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

第三种配置是反向代理服务器，通过它我们实际上是代理服务器向外围设备发出请求，然后转发给我们的服务器。这也可以防止跨域。

以上是AJAX知识的总结。最后推荐大家看ajax的视频来学习，初学者更容易理解和吸收。Power Node的ajax学习教程通过ajax的传统使用方式、json操作方式和跨域方式等先进技术对Ajax进行了全面的讲解。

http://www.bjpowernode.com/?今日头条