AJAX开发基础及原生JS操作步骤
2017-04-28 23:34
323 查看
AJAX是什么?
AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。
AJAX = 异步 JavaScript和XML技术。
AJAX 是一种独立于 Web 服务器软件的浏览器技术。
AJAX用来做什么?
前端页面向服务器后端请求数据
AJAX用在哪里?
主要在前端开发过程中,需要向服务器请求数据的时候。
AJAX核心?—操作XMLHttpRequest
实现AJAX操作步骤:
创建XMLHttpRequest对象
打开接口的连接,并发送请求
获取服务器返回的数据,DOM操作渲染到我们的网页中
1、创建XMLHttpRequest对象
if(window.XMLHttpRequest),是为了防止一些浏览器既不支持ActiveX控件,也不支持XMLHttpRequest组件而进行的判断.其中XMLHttpRequest也不是window对象的标准属性,但可以用来判断浏览器是否支持XMLHttpRequest组件.
else,用来判断是否使用IE浏览器.其中ActiveXOject并不是Windows对象的标准属性,而是IE浏览器中专有的属性,可以用于判断浏览器是否支持ActiveX控件.通常只有IE浏览器或以IE浏览器为核心的浏览器才能支持Active控件.
2、打开接口的连接,并发送请求
代码中的参数解释如下所示:
method:指定http的请求的方式,一共有get、post、head、put、delete五种方法,常用的方法为get和post。
URL:该参数用于指定HTTP请求的URL地址,可以是绝对URL,也可以是相对URL。
flag:该参数为可选参数,参数值为布尔型。该参数用于指定是否使用异步方式。true表示异步方式、false表示同步方式,默认为true。
name:该参数为可选参数,用于输入用户名。如果服务器需要验证,则必须使用该参数。
password:该参数为可选参数,用于输入密码。如果服务器需要验证,则必须使用该参数。
3、获取服务器返回的数据,DOM操作渲染到我们的网页中
从创建XMLHttpRequest对象开始,到发送数据、接收数据、XMLHttpRequest对象一共会经历以下5中状态。
只有在XMLHttpRequest对象完成了以上5个步骤之后,才可以获取从服务器端返回的数据。因此,如果要获得从服务器端返回的数据,就必须要先判断XMLHttpRequest对象的状态。
AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。
AJAX = 异步 JavaScript和XML技术。
AJAX 是一种独立于 Web 服务器软件的浏览器技术。
AJAX用来做什么?
前端页面向服务器后端请求数据
AJAX用在哪里?
主要在前端开发过程中,需要向服务器请求数据的时候。
AJAX核心?—操作XMLHttpRequest
实现AJAX操作步骤:
创建XMLHttpRequest对象
打开接口的连接,并发送请求
获取服务器返回的数据,DOM操作渲染到我们的网页中
1、创建XMLHttpRequest对象
var _http;//声明一个变量,存放XMLHttpRequest对象 if(window.XMLHttpRequest) { _http = new XMLHttpRequest(); } else { //创建IE浏览器中的XMLHttpRequest对象 _http = new ActiveXObject("Microsoft.XMLHTTP"); }
if(window.XMLHttpRequest),是为了防止一些浏览器既不支持ActiveX控件,也不支持XMLHttpRequest组件而进行的判断.其中XMLHttpRequest也不是window对象的标准属性,但可以用来判断浏览器是否支持XMLHttpRequest组件.
else,用来判断是否使用IE浏览器.其中ActiveXOject并不是Windows对象的标准属性,而是IE浏览器中专有的属性,可以用于判断浏览器是否支持ActiveX控件.通常只有IE浏览器或以IE浏览器为核心的浏览器才能支持Active控件.
2、打开接口的连接,并发送请求
_http.open(method,URL,flag,name,password); _http.send();
代码中的参数解释如下所示:
method:指定http的请求的方式,一共有get、post、head、put、delete五种方法,常用的方法为get和post。
URL:该参数用于指定HTTP请求的URL地址,可以是绝对URL,也可以是相对URL。
flag:该参数为可选参数,参数值为布尔型。该参数用于指定是否使用异步方式。true表示异步方式、false表示同步方式,默认为true。
name:该参数为可选参数,用于输入用户名。如果服务器需要验证,则必须使用该参数。
password:该参数为可选参数,用于输入密码。如果服务器需要验证,则必须使用该参数。
3、获取服务器返回的数据,DOM操作渲染到我们的网页中
_http.onreadystatechange = function() { if(_http.readyState == 4 && _http.status == 200){ var _content = _http.responseText;//接受数据 console.log(_content); var _jsonArr = JSON.parse(_content);// 将字符串转换成JSON对象 console.log(_jsonArr); for(var i = 0; i < _jsonArr.length; i++) { var _li = document.createElement("li"); _li.textContent = _jsonArr[i].className; _ct.appendChild(_li); } } }
从创建XMLHttpRequest对象开始,到发送数据、接收数据、XMLHttpRequest对象一共会经历以下5中状态。
⑴未初始化状态。在创建完XMLHttpRequest对象时,该对象处于未初始化状态,此时XMLHttpRequest对象的readyState属性值为0。 ⑵初始化状态。在创建完XMLHttpRequest对象后使用open()方法创建了HTTP请求时,该对象处于初始化状态。此时XMLHttpRequest对象的readyState属性值为1。 ⑶发送数据状态。在初始化XMLHttpRequest对象后,使用send()方法发送数据时,该对象处于发送数据状态,此时XMLHttpRequest对象的readyState属性值为2。 ⑷接收数据状态。Web服务器接收完数据并进行处理完毕之后,向客户端传送返回的结果。此时,XMLHttpRequest对象处于接收数据状态,XMLHttpRequest对象的readyState属性值为3。
只有在XMLHttpRequest对象完成了以上5个步骤之后,才可以获取从服务器端返回的数据。因此,如果要获得从服务器端返回的数据,就必须要先判断XMLHttpRequest对象的状态。
相关文章推荐
- 蓝鸥原生JS:什么是Ajax及Ajax使用步骤
- 原生JS的Ajax操作
- 原生JS操作AJAX
- 原生JS Ajax操作
- 原生JS实现Ajax通过GET方式与PHP进行交互操作示例
- 原生js Ajax操作
- JS基础【原生JS实现的AJAX发送GET、POST】
- 原生JS Ajax操作,登录页面
- vue.js原生组件化开发(一)——组件开发基础
- IE浏览器使用原生JS操作ajax无效
- ajax基础——如何用原生js封装一个ajax函数
- 原生JS中的Ajax操作
- 原生JS Ajax操作
- 原生js学习笔记——Ajax基础
- 使用原生JS编写ajax操作XMLHttpRequst对象
- ajaxrequest.js ajaxrequest 0.7最新版 使用AJAXRequest进行AJAX应用程序开发入门小技巧
- Ajax操作Dom的基础--节点的添加
- 1.Ajax与Atlas开发基础
- js+ asp.Net ajax开发163邮箱效果(列表底色、多选拖动等)--列表底色随鼠标移动变化
- ajaxrequest.js ajaxrequest 0.7最新版 使用AJAXRequest进行AJAX应用程序开发入门小技巧