AJAX 向服务器发送请求请求

AJAX 使用 XMLHttpRequest 对象和服务器交换数据

向服务器发送请求

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

xmlhttp.open("GET","/r/show/yufei/txt/ajax_info",true);
xmlhttp.send();
方法 描述
open(method,url,async) 规定请求的类型、URL 以及是否异步处理请求

method:请求的类型;GET 或 POST
url:文件在服务器上的位置
async:true(异步)或 false(同步)
send(string) 将请求发送到服务器

string:仅用于 POST 请求

GET 还是 POST ?

与 POST 相比,GET 更简单也更快,而且足以应付大部分的情况

但,如果有以下情况,推荐使用 POST 方法

  1. 无法使用缓存文件(更新服务器上的文件或数据库)
    因为 GET 请求会被浏览器缓存

  2. 向服务器发送大量数据,GET 发送的数据有大小显示,POST 没有

  3. 发送含有未知字符的数据
    GET 使用 URL 规范,URL 规范之外的数据只能使用 POST

GET 请求

GET 请求的简单使用

xmlhttp.open("GET","/r/show/yufei/txt/demo_get",true);
xmlhttp.send();

运行范例 »

因为浏览器会缓存 GET 请求,所以上面的范例可能得到的是缓存的结果

为了避免这种情况,请向 URL 添加一个动态变化的参数

"/r/show/yufei/txt/demo_get?t=" + (+new Date())
xmlhttp.open("GET",/r/show/yufei/txt/demo_get?t=" + (+new Date(),true);
xmlhttp.send();

运行范例 »

如果想要通过 GET 方法发送信息,请向 URL 添加信息

xmlhttp.open("GET","/r/show/yufei/txt/ajax_get2?fname=Henry&lname=Ford",true);
xmlhttp.send();

运行范例 »

POST 请求

POST 请求的简单使用

xmlhttp.open("POST","/r/show/yufei/txt/demo_post",true);
xmlhttp.send();

运行范例 »

如果想要使用 POST 传输数据,先使用 setRequestHeader() 来添加 HTTP 头,然后在 send() 方法中传入要发送的数据即可

xmlhttp.open("POST","/r/show/yufei/txt/ajax_post2",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("greeting=Hello&name=Ajax");

运行范例 »

方法 描述
setRequestHeader(header,value) 向请求添加 HTTP 头

header: 规定头的名称
value: 规定头的值

open() 方法中的 url 参数

XMLHttpRequest 对象的 open() 方法中的 url 参数是服务器上文件的地址

xmlhttp.open("GET","ajax_test.html",true);

该文件可以是任何类型的文件,比如 .txt.xml,或者服务器脚本文件,比如 .asp.php

服务器脚本文件 是指在传回响应之前,能够在服务器上执行任务的文件

异步 (Async) : True 或 False ?

AJAX 指的是异步 JavaScript 和 XML(Asynchronous JavaScript and XML)。

XMLHttpRequest 对象如果要用于 AJAX 的话,其 open() 方法的 async 参数必须设置为 true

xmlhttp.open("GET","ajax_test.html",true);

很多在服务器执行的任务都相当费时,AJAX 出现之前,这可能会引起应用程序挂起或停止

通过 AJAX,JavaScript 无需等待服务器的响应:

  1. 在等待服务器响应时执行其他脚本

  2. 当响应就绪后对响应进行处理

当 Async = true

当使用 async=true 时,需要定义在响应处于 onreadystatechange 事件中的就绪状态时执行的函数

xmlhttp.onreadystatechange = function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
}

xmlhttp.open("GET","/r/show/yufei/txt/ajax_info",true);
xmlhttp.send();

运行范例 »

我们将在稍后的章节学习更多有关 onreadystatechange 的内容

Async = false

如果想设置 async = false,则需要将 open() 方法中的第三个参数改为 false

调用 send() 方法后,就可以使用 xmlhttp.responseText 获得服务器返回的结果

xmlhttp.open("GET",/r/show/yufei/txt/ajax_info",false);
xmlhttp.send();
var result = xmlhttp.responseText;

我们不推荐使用 async=false 虽然对于一些小型的请求,也是可以的

请记住 JavaScript 会等到服务器响应就绪才继续执行

如果服务器繁忙或缓慢,应用程序会挂起或停止,也就是传说中的卡顿,浏览器卡死了

xmlhttp.open("GET","/r/show/yufei/txt/ajax_info",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML = xmlhttp.responseText;

运行范例 »

注意

当设置使用 async=false 时,请不要编写 onreadystatechange 函数

关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2022 简单教程 twle.cn All Rights Reserved.