JavaScript-3.AJAX

Ajax

Asynchronous JavaScript And XML 异步javascript和xml

AJAX并不是JavaScript的范畴,只是用JavaScript执行异步网络请求而已。

通常JavaScript用Ajax技术提交表单,上传文件,跨域等操作

传统的网页,如果需要更新内容,那必须重载页面,而使用AJAX在不重载整个页面的情况下,和后端服务交换数据并更新显示。

XHR对象

XMLHttpRequest对象用于在和后端服务器交换数据。

XMLHttpRequest简称XHR 。通常绝大多数游览器都支持XMLHttpRequest对象,除了IE7以下的版本不支持(ActiveXObject)。

1
2
3
4
5
6
7
8
//查看是否支持XMLHttpRequest对象
<script>
if(window.XMLHttpRequest){
console.log('支持');
}else{
console.log('不支持');
}
</script>
创建XHR对象

使用new XMLHttpRequest();创建一个XHR对象

实例

1
2
3
4
<script>
var XmrObj = new XMLHttpRequest();
console.log(XmrObj);
</script>
XHR请求方法

向后端发数据,主要使用open()send()方法:

open()方法是定义发送的方法,地址等信息,

send()主要是发送open()定义的方法。

send()前可以通过setRequestHeader()设置HTTP头信息。

open()主要是定义发送的方法

xmlhttp.open(method,url,async)

method:表示发送到后端方法,主要有POST和GET

url:表示发送到后端哪个URL上处理

async:是否开启异步,如果true表示开启,如果false表示是同步,默认为true,

​ 如果与后台交互,async必须为异步,如果是同步提交时会等待服务接受完了后才能进行下一步操作。

setRequestHeader(header,value) 定义发送的头信息,header规定头名称,value规定值。

send()主要是发送刚才定义的方法

xmlhttp.send(string)

string;用于POST请求,因为GET发送,数据都是在url后面。

实例

1
2
3
4
5
6
7
8
9
10
<script>
var XhrObjget=new XMLHttpRequest();
XhrObj.open('GET','get_study.html?id=123');
XhrObj.setRequestHeader("Content-type","application/x-www-form-urlencoded");
XhrObj.send();
var XhrObj=new XMLHttpRequest();
XhrObj.open('POST','get_study.html');
XhrObj.setRequestHeader("Content-type","application/x-www-form-urlencoded");
XhrObj.send('id=123');
</script>
XHR响应方法

接受后端的数据,主要用到responseText()responseXML()属性

responseText:属性用于获取字符串形式的响应数据

responseXML:属性用于获取XML格式响应数据

onreadystatechange事件

假设我们send()数据后,但是后台处理异常,没收到数据那么怎么去处理呢,是不是应该有个XHR对象的状态信息呢?

这里就用到onreadystatechange事件。

onreadystatechange事件就是当readyState改变时,会触发的onreadystatechange事件。

readState属性就是XMLHttpRequest状态信息.

XMH状态属性除了readState还有个status属性

onreadystatechange 事件名称,当readState状态变化时,调用此函数

readState状态有0~4种状态

0-未初始化,尚未调用open()方法;
1-启动,调用了open()方法,未调用send()方法;
2-发送,已经调用了send()方法,未接收到响应;
3-接收,已经接收到部分响应数据;
4-完成,已经接收到全部响应数据;

statue属性:200表示正常,404表示页面没找到

实例:

1
2
3
4
5
6
7
8
9
10
11
<script>
var XhrObj=new XMLHttpRequest();
XhrObj.open('POST','get_study.html');
XhrObj.setRequestHeader("Content-type","application/x-www-form-urlencoded");
XhrObj.send();
XhrObj.onreadystatechange=function(){
if(XhrObj.readState==4 && XhrObj.statue==200){
console.log('数据发送成功,结果为',XhrObj.responseText)
}
}
</script>

Ajax跨域

游览器都有同源策略,XMLHttpRequest遵循这种策略,只允许本地发送本地的请求。

默认情况下不允许跨域,一旦出现跨域就提示Access-Control-Allow-Origin,主要是为了安全起见。

可以通过JSONP方式实现跨域。

JSONP只是一种方式,不是数据结构,JSONP默认是使用GET请求,如果POST请求返回也是GET请求

原理是利用<script>块,在其执行src属性为所需要跨的域,函数(返回值)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<body>
<input type="button" value="JSONP方式获取" onclick="remoteJsonp();">
</body>
<scirpt>
function remoteJsonp(){
var tag = document.createElement('script'); //先创建script元素
tag.src='http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list&_=1454376870403';
// $(document.head).append(tag); //每次请求都会增加<script>标签,其实不需要
document.head.appendChild(tag); //增加一次,就删除一次
document.head.removeChild(tag);
}
function list(arg){ //对方约定好,需要有个list函数,当请求地址后,就会执行list函数,函数里面arg就是数据
console.log(arg);
console.log(arg.data)
console.log(arg.data[0]);
}
</scirpt>

Ajax伪提交

补充HTML之iframe

iframe元素会创建包含另一个文档的内联框架(行内框架)

这里点击页面,不刷新全部页面,只刷新iframe内部定义的页面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<body>
<div>
<iframe id="ifr" heigh="200px" width="100%" src="http://www.baidu.com"></iframe>
<input placeholder="请输入网址" id="url">
<button onclick="changeurl()">点解切换输入的网站</button>
</div>
</body>
<script>
function changeurl(){
var get_input = document.getElementById("url"); //获取输入的url
var get_ifr = document.getElementById("ifr"); //获取id为ifr的元素
get_ifr.src=get_input.value; //将id为ifr的src属性换成输入的url
}
</script>

Ajax上传文件

通过FormData()上传

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<input type="file" id="files">
<button onclick="submit_fd()">ajax上传</button>
<script>
function submit_fd(){
var file_data = document.getElementById('files');
// console.log(file_data); //获取id为files标签
// console.log(file_data.files); //获取标签files数据
// console.log(file_data.files[0]); //获取标签files数据索引
var data = FormData(); //FormData可以封装
data.append('k1','v1'); //append添加数据
data.append('k2',file_data.files[0]); //添加文件
var XhrObj=new XMLHttpRequest();
XhrObj.onreadystatechange=function(){
if(XhrObj.readyState==4){
console.log(XhrObj.responseText)
}
}
XhrObj.open('POST','http://127.0.0.1/get_input');
XhrObj.send(data); //将data数据发送后端

}
</script>
看完了?赏个鸡腿钱,谢谢老板!