AJAX基础教程:向服务器发送请求

在上一篇中我们介绍了如何使用JavaScript创建XMLHttpRequest对象,在本文中将介绍使用XMLHttpRequest发送请求。

向服务器发送数据需要用到两个方法:open()和send()

open(method,url,async):规定请求的类型、URL 以及是否异步处理请求。

参数介绍:

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

send(string):将请求发送到服务器。

参数介绍:

  • string:仅用于 POST 请求

在open方法中,我们需要指定请求的类型,常用的请求类型有GET、POST等,那么什么时候该用GET,什么时候该用POST呢?

与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。

然而,在以下情况中,请使用 POST 请求:

  • 无法使用缓存文件(更新服务器上的文件或数据库)
  • 向服务器发送大量数据(POST 没有数据量限制)
  • 发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠

如果需要像 HTML 表单那样 POST 数据,请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据。

setRequestHeader(header,value):向请求添加 HTTP 头。

参数介绍:

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

示例代码:

xmlhttp.open("POST", "ajax_test.asp", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");

同步还是异步?

AJAX指的是异步的AJAX和XML,但open方法却可以规定请求是同步或者异步,这为开发者提供了一个灵活的选项。

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

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

对于 web 开发人员来说,发送异步请求是一个巨大的进步。很多在服务器执行的任务都相当费时。AJAX 出现之前,这可能会引起应用程序挂起或停止。

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

  • 在等待服务器响应时执行其他脚本
  • 当响应就绪后对响应进行处理

异步请求的回调方法

使用同步的请求处理方法比较简单,我们可以直接在send方法之后来获取XMLHttpRequest 的Response:

xmlhttp.open("GET", "test1.txt", false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML = xmlhttp.responseText;

但对于异步请求,直接在send方法后面获取Response是不可行的,因为此时服务器还没有返回数据。这个时候,我们就需要为XMLHttpRequest添加onreadystatechange事件,这个事件将监视XMLHttpRequest状态的变化,当检测到请求成功的时候我们即可获取Response数据。

xmlhttp.onreadystatechange = function () {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
    }
}
xmlhttp.open("GET", "test1.txt", true);
xmlhttp.send();

我们将在下一篇中详细介绍readyState和Status。

时间: 2024-11-05 20:41:00

AJAX基础教程:向服务器发送请求的相关文章

AJAX向服务器发送请求

原生的: 1.>:GET请求 $(function () { $("#btnGetDate").click(function () { //开始通过AJAX向服务器发送请求. var xhr; if (XMLHttpRequest) {//表示用户使用的高版本IE,谷歌,狐火等浏览器 xhr = new XMLHttpRequest(); } else {// 低IE xhr=new ActiveXObject("Microsoft.XMLHTTP"); }

【03】AJAX 向服务器发送请求

AJAX 向服务器发送请求 创建 XMLHttpRequest 对象后,就可以向服务器发送请求了. XMLHttpRequest 对象的 open() 方法和 send() 方法用来向服务器发送请求. 注意:AJAX 向服务器发送的是 http 请求,与我们浏览网页时发送的 http 请求一样.我们可以右键查看当前网页的源代码,由很多 HTML.CSS和JavaScript 组成,如果我们使用 AJAX 请求当前的 URL ,返回的内容是一样的.(魔芋:也就是说ajax发送的,和我们平时输入网址

jQuery基础---Ajax基础教程

jQuery基础---Ajax基础 内容提纲: 1.Ajax 概述 2.load()方法 3.$.get()和$.post() 4.$.getScript()和$.getJSON() 5.$.ajax()方法 6.表单序列化 发文不易,转载请注明出处~ 一.Ajax 概述 Ajax 这个概念是由 Jesse James Garrett 在 2005 年发明的. 它本身不是单一技术, 是一串技术的集合,主要有: 1.JavaScript,通过用户或其他与浏览器相关事件捕获交互行为: 2.XMLHt

jQuery基础---Ajax基础教程(二)

jQuery基础---Ajax进阶 内容提纲: 1.加载请求 2.错误处理 3.请求全局事件 4.JSON 和 JSONP 5.jqXHR 对象 发文不易,转载请注明出处! 在 Ajax 基础一篇中,我们了解了最基本的异步处理方式.本篇来了解一下 Ajax 的一些全局请求事件.跨域处理和其他一些问题. 一.加载请求 在 Ajax 异步发送请求时,遇到网速较慢的情况,就会出现请求时间较长的问题.而超过一定时间的请求, 用户就会变得不再耐烦而关闭页面. 而如果在请求期间能给用户一些提示,比如:“正在

ajax-向服务器发送请求

ajax-向服务器发送请求 1.将请求发送到服务器,使用XMLHttpRequest对象的 open() 和 send() 方法.     xmlhttp. open(method,url,async) 方法:     method:请求的类型:get 或者 post: url:文件在服务器上的位置(该文件可以是任何类型的文件,比如:.txt,.xml,.asp,.PHP): async: true(异步)或 false(同步)                  注:XMLHttpRequest

AJAX基础教程1——起飞网

AJAX基础教程:创建 XMLHttpRequest 对象 2015-07-02 转载http://www.qeefee.com/article/000439 XMLHttpRequest 对象 XMLHttpRequest 是 AJAX 的基础. 所有现代浏览器均支持 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject). XMLHttpRequest 用于在后台与服务器交换数据.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 创建 X

js 设置一个按周期向服务器发送请求 推荐是用 setTimeOut函数

//执行setTimeOut函数返回的ID var timeOutCount; //周期(以毫秒/ms为单位),平均每3秒刷新一次 var timeCycle = 3000; $(function () { getData(); }); //向服务器发送请求,并获取返回结果 function getData() { $.ajax({ type: 'GET', url: '...', dataType: "json", global: false, success: function (

向服务器发送请求

向服务器发送请求 1.向服务器发送请求 如需要将请求发送到服务器,我们使用XMLHttpRequest对象的open()和send()方法: xmlhttp.open("GET","test1.txt",true); xmlhttp.send(); 方法解释: (1)open(method,url,async): 规定请求的类型.URL以及是否异步处理请求: method:请求的类型,可以是GET或者POST: url:文件在服务器上的位置: async:true(

在向服务器发送请求时发生传输级错误。 (provider: 共享内存提供程序, error: 0 - 管道的另一端上无任何进程。

作者:卿笃军 原文地址:http://blog.csdn.net/qingdujun/article/details/36425825 SQL Server 2008 + VS2010 用C#编写的代码,进行数据库还原的时候,出错: 错误内容: 在向服务器发送请求时发生传输级错误. (provider: 共享内存提供程序, error: 0 - 管道的另一端上无任何进程. 解决方法: 将SQL链接语句构造成如下: string strLink = @"server=.;database=Data

学习-【前端】-angularjs基本框架以及向服务器发送请求的方法

昨天写了个跨域的东西,自己琢磨了下,想到这种方式正好也是之前想的混合app如何交互服务器的解决办法.心里还是蛮开心的.今天又花时间把前端客户端部分的框架做了出来,整合的思路是参照node社区移动端的设计方案,把所有controllers和所有services放到一起,不过请求数据未用$resource也没有用原生的$http,而是使用了restangular,用完这个再把配置文件单独整合到一个文件夹里.整个框架看起来都十分的整洁了. 先给个结构图: 因为是由产品驱动的架构,所以最开始没有使用bo