一、认识Ajax
- AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。功能:在不刷新页面的情况下,实现与后台的数据交互。
- AJAX 不是新的编程语言,而是一种使用现有标准的新方法。 Ajax技术核心是XMLHttpRequest对象(简称XHR)。
- Ajax不能跨域,浏览器的同源策略。要想跨域,可以使用jsonp,或者后台开放端口。
二、MLHttpRequest 对象方法
- 新建一个Ajax对象:
new XMLHttpRequest();
。ie 6以下版本new ActiveXObject('Msxml2.XMLHttp.3.0')
或 new ActiveXObject('Msxml2.XMLHTTP.6.0')
。
new XMLHttpRequest() || new ActiveXObject('Msxml2.XMLHTTP.3.0')||new ActiveXObject('Msxml2.XMLHTTP.6.0');
复制代码
- 打开资源:
open(method, url, asynch, [username],[password])
。指定和服务器端交互的HTTP方法,URL地址,即其他请求信息。method:http请求方法,一般使用”GET“,”POST“.。url:请求的服务器的地址。asynch:是否采用异步方法,true为异步,false为同步,默认是异步。后边两个可以不指定,username和password分别表示用户名和密码,提供http认证机制需要的用户名和密码。 - GET请求是最常见的请求类型,最常用于向服务器查询某些信息。必要时,可以将查询字符串参数追加到URL的末尾,以便提交给服务器。URL的长度是有限制的,所以不能发送大量数据。特殊字符(eg:&等),传参产生的问题可以使用
encodeURIComponent()
进行编码处理,中文字符的返回及传参,可以将页面保存和设置为utf-8
格式即可。或者使用提交url通用方法。
xhr.open('get', 'demo.php?rand=' + Math.random() + '&name=Koo', true);
复制代码
- POST请求可以包含非常多的数据,我们在使用表单提交的时候,很多就是使用的POST传输方式。
xhr.open(‘post’, ‘demo.php’, true);
。而发送POST请求的数据,不会跟在URL的尾巴上,而是通过send()方法向服务器提交数据xhr.send(‘name=Lee&age=100’);
。一般来说,向服务器发送POST请求由于解析机制的原因,需要进行特别的处理。因为POST请求和Web表单提交是不同的,需要使用XHR来模仿表单提交。
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
复制代码
setRequestHeader(String header,String Value)
如果是POST方式,需要设置请求头。设置HTTP请求中的指定头部header的值为value。此方法需在open方法以后调用,一般在post方式中使用。
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
复制代码
send(data)
:向服务器发出请求,如果采用异步方式,该方法会立即返回。data可以指定为null表示不发送数据,其内容可以是DOM对象,输入流或字符串。Abort()
:停止当前http请求。对应的XMLHttpRequest对象会复位到未初始化的状态。
三、XMLHttpRequest对象属性
onreadystatechange
:请求状态改变的事件触发器(readyState变化时会调用这个属性上注册的javascript函数)。readyState
:表示XMLHttpRequest对象的状态。0:未初始化。XMLHttpRequest对象已创建,未调用open。1:open方法成功调用,但send方法未调用。2:send方法已经调用,尚未开始接受数据。3:正在接受数据。Http响应头信息已经接受,但尚未接收完成。4:响应数据接受完成。response
| responseText
| responseXML
。response
:后台返回什么就是什么。responseText
:responseType
设置的是''或者'text',服务器响应的文本内容。responseXML
:服务器响应的XML内容对应的DOM对象。status
:服务器返回的http状态码。200表示“成功”, 404表示“未找到”, 500表示“服务器内部错误”等。通过xhr.getResponseHeader(“Content-Type”);
可以获取单个响应头信息 。xhr.getAllResponseHeaders();
获取整个响应头信息。
var xhr = new XMLHttpRequest();
console.log(xhr);
console.log(xhr.readyState);
xhr.open("GET",'/test.php?user=emmmm&age=18');
console.log(xhr.readyState);
xhr.onreadystatechange = function () {
console.log(this.readyState);
console.log(this.status);
console.log(this.response);
if(this.readyState === 4){
if(this.status >= 200 && this.status < 300 || this.status === 304){
console.log(this.response)
}
}
}
xhr.send();
复制代码
<?php
var_dump($_GET);
复制代码
var _data = 'user=xxxx&age=18';
var xhr = new XMLHttpRequest();
xhr.open('POST','/testpost.php');
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.send(_data);
xhr.onreadystatechange = function(){
if(this.readyState === 4){
if(this.status >= 200 && this.status < 300 || this.status === 304){
console.log(this.response);
}
}
}
复制代码
<?php
var_dump($_POST);
复制代码
四、Ajax封装
ajax({
url : '/test.php',
type : 'post',
data : {
user : '韩梅梅',
age : 18
},
success : function (data) {
console.log(data)
}
});
function ajax(options) {
options.type = /post/i.test(options.type) ? 'POST' : 'GET';
options.async = options.async===false ? false : true;
var xhr = new XMLHttpRequest();
var data = '';
for(var k in options.data){
data+=k+'='+ encodeURIComponent(options.data[k])+'&';
}
if(options.type === 'GET'){
if(!/\?/.test(options.url)){
options.url+='?';
}else{
if(!/(&\s*)$/.test(options.url)){
options.url+='&';
}
}
options.url += data+'_='+new Date().getTime();
data = null;
}
xhr.open(options.type,options.url,options.async);
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded;charset=UTF-8');
xhr.onreadystatechange = function(){
if(this.readyState === 4){
if(this.status >= 200 && this.status < 300 || this.status===304){
options.success && options.success.call(this,strJsonCode(this.response));
}else{
options.error && options.error.call(this,this.status);
}
}
};
xhr.send(data);
}
function strJsonCode(str) {
try {
return JSON.parse(str);
}catch (e) {
return str;
}
}
复制代码
<?php
exit(json_encode(array(
'get' => $_GET,
'post' => $_POST
)));
复制代码
五、jsonp
- jsonp是一种数据的传输技巧,解决Ajax跨域的问题,src没有跨域问题。
- p是填充的意思,json的填充。jsonp返回的数据形式是
callback({age:30,name:'二狗'})
而不是{age:30,name:'二狗'}
是用括号包裹,前面的名称就是‘填充’,也就是jsonp的p。因为script接受的数据如果是一个json没办法保存,而调用一个函数,{}数据作为实参传递,这样就可以拿到json中的数据。
<script type="text/javascript">
function jQuery11020815081152774352_1530968010825(data){
console.log(data)
</script>
<script type="text/javascript" src="https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=%E5%85%BB%E7%8C%AA%20&json=1&p=3&sid=1466_21100_20927&req=2&csor=3&pwd=%E5%85%BB%E7%8C%AA&cb=jQuery11020815081152774352_1530968010825&_=1530968010835"></script>
复制代码
- jsonp前端代码看起来像这样。
<script>
function callback(data){
console.log( data);
}
</script>
<script src='./jsonp.php?jsonp=callback'></script>
//我需要后台返回一个callback({数据})这样的一个值,实质就是调用上面的函数
复制代码
- jsonp中jsonp.php后台中的代码。
<?php
$val = $_GET['jsonp'];
$arr = array(
"name"=>"二狗",
"age"=>50
);
echo $val."(".json_encode($arr).")";
?>
复制代码