ajax原生获取数据,原生Ajax(获取&请求)数据 及 原理

ajax(Asynchronous Jacascript and XML)

ajax可以在不重新加载整个网页的情况下，对网页的某个部分数据进行更新

ajax不需要任何浏览器插件,只需要用户允许Javascript在浏览器上执行,因为ajax需要借助javascript来实现浏览器和服务器之间的异步交互

工作原理:

在用户端和服务器端之间添加一个中间层(ajax引擎)，改变同步交互的过程，并不是所有的用户请求

都提交给服务器端,可以把部分的数据提交给ajax引擎来做,当需要从服务器端读取新的数据时,可以

由ajax引擎项服务器提交请求，从而使用户操作和服务器响应异步化

ajax的组成部分:

Javascript,DOM,CSS,XMLHttpRequest(ajax的核心)

XMLHttpRequest对象负责将客户端信息以异步通信的方式发送给服务器端，并接收服务器端返回的响应

信息和数据:

在ajax中,通过XMLHttpRequset对象向服务器发送异步请求，从服务器端获取数据，使用js操作DOM元素

来刷新页面和重组数据,依靠css来布局

优点:

减轻服务器负担,提高web性能,不需要插件支持,调用外部数据方便,达到页面和数据的分离

缺点:

不能很好的支持移动设备,不能很好的支持搜索引擎

Ajax请求数据

1.创建XMLHttpRequest()对象

2.创建回调函数

3.请求数据

4.设置请求的HTTP头部信息(这是请求头)

5.在回调函数里根据返回的不同状态进行操作

一：创建XMLHttpRequest()对象

var ajax;

if(window.XMLHttpRequest){

ajax = new XMLHttpRequest(); // 兼容其他浏览器

}else{

ajax = new ActiveXObject("Microsoft.XMLHTTP"); // 兼容老版IE

}

二：创建回调函数

设置ajax的事件处理函数，交互时的操作

ajax.onreadystatechange = function(){}

三：将请求发送到服务器

使用open方法

ajax.open("POST","data.php",true);

请求数据 类型 为 POST ， 路径 data.php ，true异步请求

四：设置请求的HTTP头部信息

ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded"); // 设置表单的请求头

HTTP请求头类型有4种

// 1.发送表单数据

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

// 2.发送纯文本(默认值)

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

// 3.发送html文本

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

// 4.发送json格式的数据：

ajax.setRequestHeader("content-type","application/json;charset=utf-8");

五：在回调函数里根据返回的不同状态进行操作

ajax.onreadystatechange = function(){ // 事件函数 监听

// 判断readyState == 4(交互完成)status服务器返回的状态(200是ok)

if(ajax.readyState == 4 && ajax.status == 200){

console.log(ajax.responseText); // 接受到的文本内容

var arr = JSON.parse(ajax.responseText); // 返回的是字符串 需要解析

}else{

console.log("异步交互失败");

}

}

Ajax获取数据

写法与post差不多，就是不用设置请求头

1.创建XMLHttpRequest()对象

2.创建回调函数

3.请求数据

4.将请求发送到服务器

5.在回调函数里根据返回的不同状态进行操作

var ajax;

// 判断：兼容IE和其他浏览器

if(window.XMLHttpRequest){

ajax = new XMLHttpRequest();//兼容其他浏览器

}else{

ajax = new ActiveXObject("Microsoft.XMLHTTP");//兼容老版IE

}

// 设置ajax的事件处理函数，交互时的操作，当readyState的属性值发生改变操作

// 判断readyState == 4(交互完成)status服务器返回的状态(200是ok)

if(ajax.readyState == 4 && ajax.status == 200){

console.log(ajax.responseText);//接受到的文本内容

var arr = JSON.parse(ajax.responseText);//返回的是字符串 需要解析

}else{

console.log("异步交互失败");

}

// 请求数据 类型 为 GET ， 路径 Ajax.json ，异步请求

ajax.open("GET","Ajax.json",true);

// 将请求发送到服务器，就是将请求发送出去，发送到ajax.open的路径

ajax.send();

XMLHttpRequest对象的常用属性和方法

属性:

readyState(0-4) :

0 -- 代表未初始化

1 -- 代表正在加载

2 -- 代表加载已完成

3 -- 代表正在交互

4 -- 代表交互完成

onreadystatechange -- 指定当发生任何状态变化时(readyState的属性值发生改变)的时间处理函数。

ajax.onreadystatechange = function(){} 这是一个事件处理函数

responseText -- 客户端接收到的HTTP响应文本内容

ajax.responseText

status -- 描述服务器返回的HTTP状态代码，比如：200对应ok，404对应 no found， 502， 301 等等

statusText -- 描述服务器返回的HTTP状态代码文本： 比如：ok，not found

方法:

abort() -- 停止当前请求

getAllResponseHeaders() -- 获取HTTP请求的所有响应的头部(获取所有的请求头)

getResponseHeaders() -- 获取指定HTTP请求的响应的头部(获取指定的请求头)

open(arg1,arg2,arg3):

arg1 -- 请求的类型，get或者post

arg2 -- 文件路径或者接口地址

arg3 -- true或者false, true代表异步，false代表同步

send() -- 将请求发送到服务器

setRequestHeader() -- 设置请求的HTTP头部信息(这是请求头)