举报投诉联系我们 手机版 热门标签 编程学
您的位置:编程学 > $ajax请求 AJAX XHR-请求

$ajax请求 AJAX XHR-请求

2023-03-21 17:18 AJAX教程

$ajax请求 AJAX XHR-请求

$ajax请求

AJAX(Asynchronous JavaScript and XML)是一种用于创建快速动态网页的技术。它使用异步数据交换和XML来与服务器进行通信,从而使网页能够快速地更新内容。

AJAX请求是一种特殊的HTTP请求,它可以让浏览器向服务器发出请求,而不必重新加载整个页面。这样可以大大减少网站的加载时间,并且可以在不重新加载整个页面的情况下对网站进行实时更新。

// 创建 XMLHttpRequest 对象 
var xhr = new XMLHttpRequest(); 
// 设置请求方法和请求地址 
xhr.open('GET', 'http://www.example.com/data.json'); 
// 发送 AJAX 请求 
xhr.send(); 
// 监听 AJAX 返回的数据 
xhr.onload = function() { 
    if (xhr.status === 200) {  // 检测 HTTP 状态码是否为 200 
        // 处理返回的数据  
        var response = JSON.parse(xhr.responseText);   // 将字符串解析成 JSON 对象  

    } else {   // HTTP 状态码不是 200  

    }   // 处理其他情况  
};   // 结束监听函数   

AJAX XHR-请求

AJAX如何工作?


 AJAX 使用的 XMLHttpRequest 的对象与服务器通信。让我们尝试通过下面显示的图像了解 AJAX 的流程或 AJAX 的工作原理。



 正如您在上面的示例中所看到的,XMLHttpRequest对象起着重要作用。

  1. 用户从 UI 发送请求,JavaScript 中调用 XMLHttpRequest 对象。
  2. HTTP 请求由 XMLHttpRequest 对象发送到服务器。
  3. 服务器使用 JSPPHPServlet,ASP.net 等与数据库交互。
  4. 检索数据。
  5. 服务器将 XML 数据或 JSON 数据发送到 XMLHttpRequest 回调函数。
  6. HTMLCSS 数据显示在浏览器上。

向服务器发送请求


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

 当你的页面全部加载完毕后,客户端会通过 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没有数据量限制)

  • 发送包含未知字符的用户输入时,POSTGET更稳定也更可靠


GET 请求


 一个简单的GET请求:

实例

xmlhttp.open("GET","demo_get.html",true);
xmlhttp.send();

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

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

实例

xmlhttp.open("GET","demo_get.html?t=" + Math.random(),true);
xmlhttp.send();

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

实例

xmlhttp.open("GET","demo_get2.html?fname=Henry&lname=Ford",true);
xmlhttp.send();

?fname=Henry&lname=Ford为请求时传递的参数,指浏览器向服务器传递两个参数,一个为fname,值为Henry,一个为lname,值为Ford。在本实例中服务器只用到fname的参数,没有用到lname的参数。

提示:GET请求具有以下的几个特点:

  • GET请求可被缓存
  • GET请求保留在浏览器历史记录中
  • GET请求可被收藏为书签
  • GET请求不应在处理敏感数据时使用
  • GET请求有长度限制
  • GET请求只应当用于取回数据

POST 请求


 一个简单POST请求:

实例

xmlhttp.open("POST","demo_post.html",true);
xmlhttp.send();

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

实例

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


方法 描述
setRequestHeader(header,value)

向请求添加 HTTP 头。

  • header: 规定头的名称

  • value: 规定头的值

 提示:POST请求的特点如下:

  • POST请求不会被缓存
  • POST请求不会保留在浏览器历史记录中
  • POST请求不能被收藏为书签
  • POST请求对数据长度没有要求

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()方法的sync(async)参数必须设置为 true:

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

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

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

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

  • 当响应就绪后对响应进行处理


Async=true


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

实例

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","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","ajax_info.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

 以上就是 AJAX 通过 XMLHttpRequest 对象向服务器发送请求的介绍内容了,在下一章中,我们将继续学习 XHR 响应。


阅读全文
以上是编程学为你收集整理的$ajax请求 AJAX XHR-请求全部内容。
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。
相关文章
  •  React AJAX

    React AJAX

    2023-06-06 React教程

    React 组件的数据可以通过 componentDidMount 方法中的 Ajax 来获取,当从服务端获取数据库可以将数据存储在 state 中,再用 thi...

  •  React 表单与事件

    React 表单与事件

    2023-05-03 React教程

    本章节我们将讨论如何在 React 中使用表单。一个简单实例在实例中我们设置了输入框 input 值value = {this.state.data}。在输入...

  • 封面背景 封面

    封面背景 封面

    2023-06-09 OnLisp中文版

    On LispCommon Lisp 高级编程技术作者: 保罗.格雷厄姆(Paul Graham) 翻译: 田春Copyright © 2007 Paul Graham原书站点: htt...

  •  第 14 章 指代宏

    第 14 章 指代宏

    2023-06-02 OnLisp中文版

    第 14 章 指代宏第 9 章只是把变量捕捉视为一种问题 某种意料之外,并且只会捣乱的负面因素。本章将显示变量捕捉 也可以被有建设...

  • 特殊定义域都有哪些 特殊定义

    特殊定义域都有哪些 特殊定义

    特殊定义变量形式 {变量}参数形式 [参数组]转义符号 注释 //空格引用 空格后面跟文字...

© 2024 编程学 bianchengxue.com 版权所有 联系我们
桂ICP备19012293号-7 返回底部