原生Ajax:XMLHttpRequest对象

AJAX概念:

一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。用于创建快速动态网页的技术。

XMLHttpRequest 是 AJAX 的基础,并且所有现代浏览器均支持 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject)。

AJAX工作原理:

                             

AJAX基于Internert标准,并联合使用它们:

(1)XMLHttpRequest 对象 (异步的与服务器交换数据)。

(2)JavaScript/DOM (信息显示/交互)。

(3)CSS (给数据定义样式)。

(4)XML (作为转换数据的格式)。

示例:

第一步:创建XMLHttpRequest 对象


第二步:向服务器发送请求请求

使用 XMLHttpRequest 对象的 open() 和 send() 方法。具体参数,如下所示:


使用方法:

(1)GET请求:


(2)POST请求:


注:如果post请求过程中有参数,需使用setRequestHeader() 来添加 HTTP 头。具体代码如下:


第三步:采用“onreadystatechange ”事件来监听状态变化,并获取服务器响应。


另外,服务器响应有两种形式: responseText 或 responseXML 。responseText代表获得字符串形式的响应数据。responseXML代表获得 XML 形式的响应数据。

XMLHttpRequest 对象的重要属性:

(1)readyState存有XMLHttpRequest 的状态,0~4。

         0——请求未初始化

         1——服务器连接已经建立

         2——请求已接受

         3——请求处理中

         4——请求已完成,且响应已就绪。

(2)status,HTTP的特定状态码:

100-199:信息性的标示用户应该采取的其他动作。

200-299:表示请求成功。

300-399:用于那些已经移走的文件,常常包括Location报头,指出新的地址。

400-499:表明客户引发的错误。

500-599:由服务器引发的错误。

具体实例:

(1)GET方法


(2)POST方法


  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: XMLHttpRequest对象是一种能够发送HTTP或HTTPS请求并接收服务器响应的JavaScript API。它可以用于创建异步的Web应用程序,不需要刷新页面就可以更新内容。这个对象通常被用于AJAX编程中,但它也可以用于其它的网络通信。 ### 回答2: XMLHttpRequest对象是一种在JavaScript中使用的原生对象,它允许在客户端和服务器之间进行异步数据交换。通过使用XMLHttpRequest对象,我们可以向服务器发送HTTP请求,并在不刷新整个页面的情况下获取服务器的响应数据。 XMLHttpRequest对象最主要的功能是通过HTTP协议向服务器发送请求,以下是实现HTTP请求的几个基本步骤: 1. 创建一个XMLHttpRequest对象:使用`new XMLHttpRequest()`来创建一个XMLHttpRequest对象。 2. 设置请求的方法和地址:使用`open()`方法来设置HTTP请求的方法(如GET、POST等)和请求的地址。 3. 设置请求头部信息:可以通过`setRequestHeader()`方法来设置HTTP请求的头部信息,例如设置Content-Type等。 4. 发送请求:使用`send()`方法来发送HTTP请求,如果是POST请求,可以在send()中传递请求的参数。 5. 监听响应:通过设置`onreadystatechange`属性,并使用`onreadystatechange`事件来监听请求的状态变化。 6. 获取响应数据:可以使用`responseText`属性来获取服务器响应的文本数据,使用`responseXML`属性获取服务器响应的XML数据,以及其他相关属性。 XMLHttpRequest对象的出现使得客户端和服务器之间的数据交换更加灵活和高效。它可以用于获取服务器返回的数据,并以各种形式展示在网页中,例如动态更新页面内容、实现无刷新提交表单、实时获取服务器数据等。同时,XMLHttpRequest对象也被广泛用于实现Ajax技术,实现异步更新页面的效果。 需要注意的是,由于浏览器的安全限制,XMLHttpRequest对象只能用于请求同源策略下的资源。如果需要请求其他域名下的资源,可以使用CORS(跨域资源共享)或者代理方式来解决。此外,XMLHttpRequest对象也有一些局限性,例如无法同时发送多个请求、无法监听请求进度等。因此,在一些复杂的应用场景下,可能需要使用其他技术来完成数据交换的需求。 ### 回答3: XMLHttpRequest对象是一种在前端开发中用于与服务器进行通信的API。它是浏览器提供的用于发送和接收HTTP请求的对象之一。 XMLHttpRequest对象的使用主要分为几个步骤。首先,我们需要创建一个XMLHttpRequest对象,可以通过调用`new XMLHttpRequest()`来实现。然后,可以使用`open()`方法来指定发送请求的方式(GET、POST等)、URL地址以及是否采用异步方式发送请求。接下来,使用`send()`方法将请求发送到服务器。 在请求发送完成后,XMLHttpRequest对象将会接收服务器的响应。我们可以通过`onreadystatechange`事件来监听ReadyState状态的变化,并在状态为4(请求已完成)时处理服务器的响应。此时,可以使用`status`属性来获取服务器返回的状态码,通过`responseText`或`responseXML`属性获取服务器返回的数据。 XMLHttpRequest对象是一个功能强大且广泛使用的技术,可以用于实现各种与服务器交互的功能。例如,可以使用该对象发送Ajax请求,实现页面的无刷新更新。同时,也可以使用它来实现登录验证、数据传输、文件上传等功能。此外,XMLHttpRequest对象支持跨域请求,可以实现访问不同域名下的资源。 总之,XMLHttpRequest对象是前端开发中不可或缺的一部分,它使得我们可以通过JavaScript与服务器进行通信,实现更加丰富和动态的用户体验。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值