ajax请求过程

最新推荐文章于 2025-02-26 17:01:34 发布

转载最新推荐文章于 2025-02-26 17:01:34 发布 · 273 阅读

标签

#Ajax

Ajax 专栏收录该内容

2 篇文章

订阅专栏

Ajax基本概念

Ajax全称为”Asynchronous JavaScript and XML”(异步JavaScript和XML),通过后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新，可以在不重新加载整个网页的情况下，对网页的某部分进行更新.
Ajax的核心是XMLHttpRequest对象，它是Ajax实现的关键-发送异步请求、接受响应以及执行回调。

原生态Ajax使用的步骤，最后告诉面试官，我们在工作中是使用jQuery来实现Ajax请求和处理的。在回答的时候尽量详尽，包括方法的参数的个数，顺序和作用，以免被面试官抓住不放。不给面试官提问的机会，那你的回答就牛逼了！

Ajax是什么

我理解Ajax 是一种异步请求数据的一种技术，对于改善用户的体验和程序的性能很有帮助。

Ajax的使用

    (1)创建`XMLHttpRequest`对象,也就是创建一个异步调用对象.

    (2)创建一个新的`HTTP`请求,并指定该`HTTP`请求的方法、`URL`及验证信息.

    (3)设置响应`HTTP`请求状态变化的函数.

    (4)发送`HTTP`请求.

    (5)获取异步调用返回的数据.

    (6)使用JavaScript和DOM实现局部刷新.


    var xmlHttp = new XMLHttpRequest();

    xmlHttp.open('GET','demo.php','true');

    xmlHttp.send()

    xmlHttp.onreadystatechange = function(){

        if(xmlHttp.readyState === 4 & xmlHttp.status === 200){

        }

    }

以下步骤，如果不能理解你死记硬背都要记下来，总比你答不出来要好吧！

1.创建Ajax核心对象XMLHttpRequest

var xmlhttp;
if( window.XMLHttpRequest){
//IE7+,Chrome,Firefox,Safari,Opera执行此代码 xmlhttp=new XMLHttpRequest;
} else{
//IE5,IE6执行该代码
xmlhttp= new ActiveXObject( "Microsoft.XMLHTTP");
}

2. 向服务器发送请求

xmlhttp.open(method,url, async);
xmlhttp.send();

示例如下：

xmlhttp.open( "GET", "http://www.runoob.com/try/ajax/demo_get.php", true);
xmlhttp.send();

注意一：open 的参数要牢记，很多面试官爱问这样的细节

method：请求的类型；GET 或 POST
url：文件在服务器上的位置，相对位置或绝对位置
async：true（异步）或 false（同步）
为什么使用 Async=true ？
我们的实例在 open() 的第三个参数中使用了 "true"。
该参数规定请求是否异步处理。
True 表示脚本会在 send() 方法之后继续执行，而不等待来自服务器的响应。
onreadystatechange 事件使代码复杂化了。但是这是在没有得到服务器响应的情况下，防止代码停止的最安全的方法。
通过把该参数设置为 "false"，可以省去额外的 onreadystatechange 代码。如果在请求失败时是否执行其余的代码无关紧要，那么可以使用这个参数

注意二：post请求不同于get请求

send(string)方法post请求时才使用字符串参数，否则不用带参数。

注意三：post请求一定要设置请求头的格式内容

xmlhttp.open( "POST", "ajax_test.html", true);
xmlhttp.setRequestHeader( "content-type", "application/x-www-form-urlencoded");
xmlhttp.send( "fname=Herry&lname=Ford");

3.服务器响应处理

responseText 获得字符串形式的响应数据。
responseXML 获得XML 形式的响应数据。

3.1 同步处理

xmlhttp.open( "GET", "http://www.runoob.com/try/ajax/demo_get.php", false);
xmlhttp.send();
document.getElementById( "mydiv").innerHTML=xmlhttp.responseText;

直接在send()后面处理返回来的数据。

3.2 异步处理

异步处理相对比较麻烦，要在请求状态改变事件中处理。

xmlhttp.onreadystatechange= function () { //接收到服务端响应时触发
if(xmlhttp.readyState== 4&&xmlhttp.status== 200){
document.getElementById( "mydiv").innerHTML=xmlhttp.responseText;
}
}

一共有5中请求状态，从0 到 4 发生变化。

0: 请求未初始化

1: 服务器连接已建立

2: 请求已接收

3: 请求处理中

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

xmlhttp.status：响应状态码。这个也是面试比较爱问的，这个必须知道4个以上，比较常见的有：

200: "OK"

304：该资源在上次请求之后没有任何修改（这通常用于浏览器的缓存机制，使用GET请求时尤其需要注意）。

403 （禁止）服务器拒绝请求。

404 （未找到）服务器找不到请求的网页。

408 （请求超时）服务器等候请求时发生超时。

500 （服务器内部错误）服务器遇到错误，无法完成请求。

AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。

AJAX = 异步 JavaScript和XML（标准通用标记语言的子集）。

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

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

传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面。

Ajax 核心类 XmlHttpRequest /ActiveXObject （主要是对于IE和非IE,不过IE的新板本已经开始支持XmlHttpRequest）

Ajax主体思想就是用这个类来发送信息，接收信息，实现局部的更新
对Ajax原理猜想：应该就是在JavaScript中构造了一个表单，提交过去，然后得到返回值，根据返回值显示相应的内容。相对于整个页面提交，他提交的参数会少一些，得到反馈也会少一些，快一些。
下面看一个简单的例子

//页面
<body>
<form action="">
用户名: <input type="text" name="uname" id="uname"/> <input type="button" value="检查用户名" onclick="check();"/> <span id="result"> </span>
</form>

</pre><pre name="code" class="html">

//JavaScript
var xmlhttp; //核心对象; function createXMLHttp(){ //这个函数用来创建一个核心对象XmlHttpRequest 根据浏览器的不同，创建不同的 if(window.XMLHttpRequest){ alert('标准'); xmlhttp=new XMLHttpRequest(); } else{ xmlhttp=new ActiveXObject("MSXML2.XMLHTTP"); //IE浏览器 } }
function check(){
var uname=document.getElementById("uname").value;
createXMLHttp();
xmlhttp.open("get","servlet",true); //servlet 对应相应的 servlet url
xmlhttp.send(null); //发送数据
xmlhttp.onreadystatechange=change; //回调函数;显示服务器返回的数据的函数
}
function change(){
if(xmlhttp.readyState==4){
if(xmlhttp.status==200){
var value= xmlhttp.responseText; //字符串方式返回（与Servlet中对应）
document.getElementById("result").innerHTML=value; //在页面上显示返回结果
}
}
}
</body>

</pre>Java中的servlet 代码 ---------------------------------------------------------------------------<pre name="code" class="java">

public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType( "text/html;charset=gbk");
request.setCharacterEncoding( "gbk");
PrintWriter out = response.getWriter();
String uname=request.getParameter( "uname");
StringBuffer sb= new StringBuffer();
if( "admin".equals(uname)){
sb.append(uname+ "巳注册");
}
else{
sb.append(uname+ "可以使用");
}
out.print(sb); //向客户输出 IE
out.flush();
out.close();
}

servlet返回给 Ajax的形式有3种 string xml json 使用时要注意其中的区别。

ajax请求过程

Ajax基本概念

为什么使用 Async=true ？