关闭

AJAX - 向服务器发送请求请求

标签: AJAX - 向服务器发送请求请求
683人阅读 评论(0) 收藏 举报
分类:

AJAX - 向服务器发送请求请求


XMLHttpRequest 对象用于和服务器交换数据。


向服务器发送请求

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

xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();

方法 描述
open(method,url,async)

规定请求的类型、URL 以及是否异步处理请求。

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

将请求发送到服务器。

  • string:仅用于 POST 请求


GET 还是 POST?

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

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

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

GET 请求

一个简单的 GET 请求:

实例

xmlhttp.open("GET","/try/ajax/demo_get.php",true);xmlhttp.send();

尝试一下 »

在上面的例子中,您可能得到的是缓存的结果。

为了避免这种情况,请向 URL 添加一个唯一的 ID:

实例

xmlhttp.open("GET","/try/ajax/demo_get.php?t=" + Math.random(),true);xmlhttp.send();

尝试一下 »

如果您希望通过 GET 方法发送信息,请向 URL 添加信息:

实例

xmlhttp.open("GET","/try/ajax/demo_get2.php?fname=Henry&lname=Ford",true);xmlhttp.send();

尝试一下 »


POST 请求

一个简单 POST 请求:

实例

xmlhttp.open("POST","/try/ajax/demo_post.php",true);xmlhttp.send();

尝试一下 »

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

实例

xmlhttp.open("POST","/try/ajax/demo_post2.php",true);xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");xmlhttp.send("fname=Henry&lname=Ford");

尝试一下 »

方法 描述
setRequestHeader(header,value)

向请求添加 HTTP 头。

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


url - 服务器上的文件

open() 方法的 url 参数是服务器上文件的地址:

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

该文件可以是任何类型的文件,比如 .txt 和 .xml,或者服务器脚本文件,比如 .asp 和 .php (在传回响应之前,能够在服务器上执行任务)。


异步 - True 或 False?

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

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

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

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

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

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

Async=true

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

实例

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

尝试一下 »

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


Async = false

如需使用 async=false,请将 open() 方法中的第三个参数改为 false:

xmlhttp.open("GET","test1.txt",false);

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

请记住,JavaScript 会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢,应用程序会挂起或停止。

注意:当您使用 async=false 时,请不要编写 onreadystatechange 函数 - 把代码放到 send() 语句后面即可:

实例

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

尝试一下 »
0
0
查看评论

AJAX入门 之 使用 AJAX 修改页面文本内容(四)

function loadXMLDoc() { var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari // XMLHttpRequest对象:用来实现异步通讯的组件对...
  • u013630349
  • u013630349
  • 2016-07-07 11:21
  • 1862

AJAX实现不刷新页面点击按钮在目标位置加载目标内容

AJAX可以实现异步请求数据,即不刷新页面的情况下请求服务器,加载目标内容到页面。 AJAX 不是新的编程语言,而是一种使用现有标准的新方法。 AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下 AJAX主要使用XMLHttpRequest对象来实现异步地与...
  • u012063507
  • u012063507
  • 2017-04-18 21:48
  • 837

AJAX学习

ajax: Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。ajax不是新的编程语言,而是一种使用现有标准的新方法。AJAX的好处在于不重新加载整个页面的情况下,就可以与服务器交换数据,更新局部网页内容。
  • The_Oringinal_Leon
  • The_Oringinal_Leon
  • 2017-02-17 11:41
  • 134

用JQ来写AJAX发送请求到服务器

用JQ发送AJAX请求到服务器,接收数据并处理。
  • Mark_JF00
  • Mark_JF00
  • 2016-12-05 00:27
  • 1588

用jquery向服务器发送请求get&post

本文主要介绍通过jquery利用内置的ajax向服务器发送get和post请求,简洁而且有效,本人已经测试通过 一.介绍get方法,代码如下 $(document).ready(function(){ $("button").click(function()...
  • u013676711
  • u013676711
  • 2015-02-11 19:04
  • 5797

session过期,使用Ajax每隔一段时间向服务器发送一次请求,来防止session过期

window.setInterval("connection();",20*60*1000); //定时发送ajax请求,防止Session过期  function connection(){      var link =...
  • tanksyg
  • tanksyg
  • 2012-11-02 12:39
  • 2680

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

AJAX - 向服务器发送请求请求 XMLHttpRequest 对象用于和服务器交换数据。 向服务器发送请求 如需将请求发送到服务器,我们使用 XMLHttpRequest 对象的 open() 和 send() 方法: xmlhttp.open("G...
  • MR_XuZhe
  • MR_XuZhe
  • 2017-12-11 08:39
  • 81

java基础——用HttpURLConnection向服务器发送POST请求

OutputStream out = null; InputStream in = null; OutputStreamWriter outWrite = null; InputStreamReader inReader = null; BufferedReader buffReader = nu...
  • zhouxingchi9527
  • zhouxingchi9527
  • 2016-07-22 15:14
  • 2610

向服务器端发送请求 GET POST

1.向服务器端发送请求并携带数据 baseURL:主机地址 真正的url在后边+?+数据键值对(用&分隔多个) 问号后即查询字符串 e.g.http://192.168.1.100:8081/serverside/name?name=zhangsan&age=20 priv...
  • qq_35539645
  • qq_35539645
  • 2016-07-19 17:10
  • 336

ajax定时请求html

设置计时器代码如下: var ssh; if (window.localStorage.getItem('SetUser') == null) { //setInterval("ajax_load_select_user(1, ...
  • milijiangjun
  • milijiangjun
  • 2017-10-10 11:38
  • 125
    个人资料
    • 访问:360019次
    • 积分:5316
    • 等级:
    • 排名:第6076名
    • 原创:198篇
    • 转载:320篇
    • 译文:0篇
    • 评论:30条
    文章分类