加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

ajax

发布时间:2020-12-15 21:07:31 所属栏目:百科 来源:网络整理
导读:概述 ajax是asynchronous javascript and XML的简写,中文翻译是异步的javascript和XML,这一技术能够向服务器请求额外的数据而无须卸载页面,会带来更好的用户体验。虽然名字中包含XML,但ajax通信与数据格式无关 ajax包括以下几步骤:1、创建AJAX对象;2、

概述

  ajax是asynchronous javascript and XML的简写,中文翻译是异步的javascript和XML,这一技术能够向服务器请求额外的数据而无须卸载页面,会带来更好的用户体验。虽然名字中包含XML,但ajax通信与数据格式无关

  ajax包括以下几步骤:1、创建AJAX对象;2、发出HTTP请求;3、接收服务器传回的数据;4、更新网页数据

  概括起来,就是一句话,ajax通过原生的XMLHttpRequest对象发出HTTP请求,得到服务器返回的数据后,再进行处理

创建

Ajax技术依赖构造函数(内置构造函数),没有这个对象就没有Ajax技术。这个函数没有什么用,但是这个函数的实例很有用!

用new关键字调用这个函数,就能得到它的实例:

var xhr = new XMLHttpRequest();

发送请求

open()

在使用XHR对象时,要调用的第一个方法是open(),如下所示,该方法接受3个参数

xhr.open("get","example.php",false);

1、open()方法的第一个参数用于指定发送请求的方式,这个字符串,不区分大小写,但通常使用大写字母。"GET"和"POST"是得到广泛支持的

"GET"用于常规请求,它适用于当URL完全指定请求资源,当请求对服务器没有任何副作用以及当服务器的响应是可缓存的情况下

"POST"方法常用于HTML表单。它在请求主体中包含额外数据且这些数据常存储到服务器上的数据库中。相同URL的重复POST请求从服务器得到的响应可能不同,同时不应该缓存使用这个方法的请求

2、open()方法的第二个参数是URL,该URL相对于执行代码的当前页面,且只能向同一个域中使用相同端口和协议的URL发送请求。如果URL与启动请求的页面有任何差别,都会引发安全错误

3、open()方法的第三个参数是表示是否异步发送请求的布尔值,如果不填写,默认为true,表示异步发送

注意,open()不会造成发送,只是配置,发送一个HTTP请求,用xhr的send方法

send()

send()方法接收一个参数,即要作为请求主体发送的数据。调用send()方法后,请求被分派到服务器

如果是GET方法,send()方法无参数,或参数为null;
如果是POST方法,send()方法的参数为要发送的数据

xhr.open("get","example.txt",false);
xhr.send(null);

状态值

AJAX状态值是指,运行AJAX所经历过的几种状态,无论访问是否成功都将响应的步骤,可以理解成为AJAX运行步骤。如:正在发送,正在响应等,由AJAX对象与服务器交互时所得;使用“ajax.readyState”获得。(由数字1~4单位数字组成)

异步响应,就需要检测XHR对象的readyState属性,该属性表示请求/响应过程的当前活动阶段。这个属性可取的值如下:

0(UNSENT):未初始化。尚未调用open()方法
1(OPENED):启动。已经调用open()方法,但尚未调用send()方法
2(HEADERS_RECEIVED):发送。己经调用send()方法,且接收到头信息
3(LOADING):接收。已经接收到部分响应主体信息
4(DONE):完成。已经接收到全部响应数据,而且已经可以在客户端使用了

理论上,只要readyState属性值由一个值变成另一个值,都会触发一次readystatechange事件。可以利用这个事件来检测每次状态变化后readyState的值。通常,我们对readyState值为4的阶段感兴趣,因为这时所有数据都已就绪。

xhr.onreadystatechange = function(){
    if(xhr.readyState === 4){
        if(xhr.status == 200){
            alert(xhr.responseText);
        }
    }
}

状态码

AJAX状态码是指,无论AJAX访问是否成功,由HTTP协议根据所提交的信息,服务器所返回的HTTP头信息代码,该信息使用“ajax.status”所获得;(由数字1XX,2XX三位数字组成)

一个完整的HTTP响应由状态码、响应头集合和响应主体组成。在收到响应后,这些都可以通过XHR对象的属性和方法使用,主要有以下4个属性

responseText: 作为响应主体被返回的文本(文本形式)
responseXML: 如果响应的内容类型是'text/xml'或'application/xml',这个属性中将保存着响应数据的XML DOM文档(document形式)
status: HTTP状态码(数字形式)
statusText: HTTP状态说明(文本形式)

在接收到响应后,第一步是检查status属性,以确定响应已经成功返回。一般来说,可以将HTTP状态码为200作为成功的标志。此时,responseText属性的内容已经就绪。此外,状态码为304表示请求的资源并没有被修改,可以直接使用浏览器中缓存的版本;当然,也意味着响应是有效的

  无论内容类型是什么,响应主体的内容都会保存到responseText属性中

if((xhr.status >=200 && xhr.status < 300) || xhr.status == 304){
    alert(xhr.responseText);
}else{
    alert('request was unsuccessful:' + xhr.status);
}

常见状态码:

成功(2字头)
重定向(3字头)
请求错误(4字头)
服务器错误(5、6字头)

200 成功
302 文件临时移动
304 文件没有改变,not modified,你刚刚请求过一次,这个文件没有发生改变,本次不传输给你了
400 错误的请求
401 没有权限
403 禁止访问
404 没有找到500 服务器故障502 错误的访问503 服务器不可用

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读