AJAX 详解

AJAX 

1.什么是AJAX?

AJAX即“Asynchronous Javascript And XML”(异步的JavaScript和XML),是指一种创建交互式网页应用的网页开发技术,用于浏览器和服务器之间进行数据交互。AJAX在浏览器与Web服务器之间使用异步数据传输(HTTP请求),这样就可使网页从服务器请求少量的信息,而不是整个页面。AJAX描述了一种主要使用脚本操作HTTP的Web应用架构,AJAX应用的主要特点是使用脚本操纵HTTP和Web服务器进行数据交换,不会导致页面重载。

AJAX 详解_第1张图片

对AJAX的印象:

AJAX是异步的JavaScript和XML;

AJAX是一种用于创建更好更快以及交互性更强的Web应用程序的技术;

AJAX是一种独立于Web服务器软件的浏览器技术;

AJAX不是一种新的编程语言,而是一种技术;

AJAX 使用 JavaScript 在 web 浏览器与 web 服务器之间来发送和接收数据(前端后端交互);

AJAX在浏览器与Web服务器之间使用异步数据传输(HTTP请求)。

2.HTTP

超文本传输协议(HyperText Transfer Protocol)规定了Web浏览器如何从Web服务器获取文档和向Web服务器提交表单内容,以及Web服务器如何响应这些请求和提交。通常,HTTP并不在脚本的控制下,只是当用户单击链接,提交表单和输入URL时才发生。但是,用JavaScript代码操纵HTTP是可行的。

1) HTTP请求 HTTP请求方法或动作 正在请求的URL 请求头集合,其中可能包含身份验证信息(可选) 请求体(可选) 2) HTTP响应 一个数字和文本组成的返回码,用来显示请求的成功和失败 一个响应头集合 响应体

3.XMLHttpRequest

浏览器在XMLHttpRequest类上定义了它们的HTTP API,这个类的每个实例都表示一个独立的请求/响应对,并且这个对象的属性和方法允许指定请求细节和提取响应数据。

很多年前Web浏览器就开始支持XMLHttpRequest,并且其API已经到了W3C指定标准的最后阶段。同时W3C正在指定“2级XMLHttpRequest”标准草案。

XMLHttpRequest对象是AJAX的基础,XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。目前所有浏览器都支持XMLHttpRequest。

3.1.XMLHttpRequest使用方法

1.创建XMLHttpRequest对象

var request = new XMLHttpRequest();

2.使用open方法设置和服务器的交互信息

open() 参数:

1.指定HTTP方法或动作,这个字符串不区分大小写,通常大家用大写字母来匹配HTTP协议。

取值可以为:GET/POST/HEAD/DELETE/OPTIONS/PUT

GET:用于常规请求,适用于URL完全指定请求资源,请求对服务器没有任何副作用,服务器的响应是可缓存的

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

2.URL,请求的主体,是相对于文档的URL。跨域请求会报错。

3.Boolean类型的值,如果值为false代表同步请求,send()方法将阻塞直到请求完成。如果这个参数是 true 或省略,请求是异步的。

request.open('get','https://api.muxiaoguo.cn/api/lishijr?api_key=0b0c3893a95d6987')

3.设置requestHeader()

在AJAX中,如果需要像 HTML 表单那样 POST 数据,需要使用 setRequestHeader() 方法来添加 HTTP 头。

然后在 send() 方法中规定需要希望发送的数据:setRequestHeader()方法需要在open()和send()方法之间调用。

  • 语法

request.setRequestHeader(属性名称, 属性值);
  • 常用的数据格式(编码可带可不带)

发送json格式数据

request.setRequestHeader('Content-type', 'application/json; charset=utf-8');

发送表单数据

request.setRequestHeader('Content-type', 'application/x-www-form-urlencoded; charset=utf-8');

发送纯文本(不指定Content-type时,此是默认值)

request.setRequestHeader('Content-type', 'text/plain; charset=utf-8');

发送html文本

request.setRequestHeader('Content-type', 'text/html; charset=utf-8');

4.设置发送的数据,开始和服务器端交互

send()

参数:

请求主体内容,如果没有,为null,或者省略。

request.send(); //调用send()之后,请求就会发送到服务器

5.取得响应,注册事件

发送请求后,会收到响应,收到响应后,XHR对象的以下属性会被填充上数据。

  • responseText:作为响应体返回的文本。

  • responseXML:如果响应的内容类型是"text/xml"或"application/xml",那就是包含响应数据的 XML DOM 文档。

  • status:响应的 HTTP 状态。

  • statusText:响应的 HTTP 状态描述。

  • readyState:返回HTTP请求状态 0 open()尚未调用 UNSENT 1 open()已调用 OPENED 2 接收到头信息 HEADERS_RECEIVED 3 接收到响应主体 LOADING 4 响应完成 DONE

  • readystatechange 请求状态改变事件 当readyState值改变为4或服务器的响应完成时,所有的浏览器都触发该事件

6.如果请求完成,并且响完成,可以获取到响应数据


7.响应解码 MIME-TYPE

1.MIME类型为text/plain,text/html,text/css 文本类型时,可以使用responseText属性解析 2.MIME类型为XML文档类型时,使用responseXML属性解析 3.如果服务器发送对象,数组这样的结构化数据作为其响应,他应该传输JSON编码的字符串数据。通过responseText接受到它,可以把它传递给JSON.parse()方法来解析。

3.2.常用请求使用

  • 使用get发送有参请求



  • 使用post发送无参请求



  • 使用post发送有参请求



你可能感兴趣的:(javascript,ajax,servlet)