一、发送ajax的原理和步骤。
ajax的原理是在HTTP协议的基础上以异步的方式通过XMLHttpRequest对象与服务器进行通信。XMLHttpRequest是浏览器内建对象,用于在浏览器后台与服务器通信(交换数据)。因此,可以不用刷新整个页面实现页面的部分更新。
1、创建异步对象
启动浏览器内建对象XMLHttpRequest,用于在浏览器后台与服务器通信(交换数据)。
2、设置请求行
3、设置请求头
4、设置请求体
5、接收返回的数据
5.1、设置响应报文
(1)报文行:状态码200 ok表示当前服务器响应成功。
状态代码由三位数字组成,第一个数字定义了响应的类别,且有五种可能取值。
1xx:指示信息 —— 表示请求已接收,继续处理。
2xx:成功 —— 表示请求已被成功接收、理解、接受。
3xx:重定向 —— 要完成请求必须进行更进一步的操作。
4xx:客户端错误 —— 请求有语法错误或请求无法实现。
5xx:服务器端错误 —— 服务器未能实现合法的请求。
(2)报文头:服务器给客户端的一些额外的信息。
(3)报文体:4表示返回的数据可以使用。返回responseText:普通字符串。返回responseXML:XML文件。
返回数据的属性有五个状态:
xhr.readyState = 0时,(未初始化)还没有调用send()方法。
xhr.readyState = 1时,(载入)已调用send()方法,正在发送请求。
xhr.readyState = 2时,(载入完成)send()方法执行完成,已经接收到全部响应内容。
xhr.readyState = 3时,(交互)正在解析响应内容。
xhr.readyState = 4时,(完成)响应内容解析完成,可以在客户端调用了。
(4)onreadystatechange 是 Javascript 的事件的一种,其意义在于监听 XMLHttpRequest 的状态是否发生改变。
注:为什么设置请求行、请求头、请求体以及接收返回的数据涉及到了与数据库的连接的知识,由于这里不是重点,所以不做过多的叙述,有兴趣的小伙伴可以去查一下客户端与服务器交互的步骤和原理。
二、原生js发送ajax
1、发送get请求
启动内建对象XMLHttpRequest
var xhr = XMLHttpRequest();
设置请求行
open('get','url?发送的内容(键1=值1,键2=值2…)');
设置请求头
get请求不需要设置请求头
设置请求体
send(null);
监听 XMLHttpRequest 的状态是否发生改变
xhr.onreadystatechange = function(){
if(xhr.status == 200 &&xhr.readyState == 4){
//getAllResponseHeaders:获取所有响应头
//responseText:接收普通字符串
//在js中通过JSON.parse方法将json格式的字符串转换为js数组或者对象
//responseXML:专门用来接收服务器返回的xml数据的
//responseXML:获取的结果可以理解为一个dom结构,我们可以使用dom的方式来获取这个返回值是的数据
}
}
2、发送post请求
post请求和get请求基本上都一样,只有设置请求行、请求头和请求体的时候不一样,在此仅指出其中的不同。
设置请求行
open(‘post’,url);
设置请求头
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
设置请求体
xhr.send(发送的参数);
代码演示:
在common.js文件中:
function $(id){
return document.getElementById(id);
}
function createXhr(){
var xhr=null;
if(window.XMLHttpRequest){
xhr=new XMLHttpRequest();
}else{
xhr= new ActiveXObject('Microsoft.XMLHttp');
}
return xhr;
}
html文件中:
<script src="common.js"></script>
//检测用户名是否存在
function uname_check(){
//1.创建xhr对象
var xhr=createXhr();
//2.监听
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
var res=xhr.responseText; //后端返回的文本 [{"uid":2,"user_name":"当当喵","gender":1}]
//console.log(res);
if(res=="1"){
$("showuname").innerHTML="用户名已占用";
isRegister=false;
}else if($("uname").value==""){
$("showuname").innerHTML="用户名不能为空";
}else{
$("showuname").innerHTML="用户名可注册";
isRegister=true;
}
}
}
//3.打开连接
var uname=$("uname").value;
xhr.open("get","/myPro/ajjquery?uname="+uname,true);
//4.发送连接
xhr.send(null);
}
三、jQuery发送ajax
1、引入jQuery
2、各个参数介绍
$.ajax({}) 可配置方式发起Ajax请求
$.get() 以GET方式发起Ajax请求
$.post() 以POST方式发起Ajax请求
$('form').serialize()序列化表单(即格式化key=val&key=val)
url 接口地址
type 请求方式
timeout 请求超时
dataType 服务器返回格式
data 发送请求数据
beforeSend:function () {} 请求发起前调用
success 成功响应后调用
error 错误响应时调用
complete 响应完成时调用(包括成功和失败)
3、常用格式
$.ajax({
type:'请求类型’,
url:'请求地址’,
data:{},
dataType:’’,
success:function(result){
成功后的操作
}
})
代码演示:
html文件中:
<script src="js/jquery-3.2.1.js"></script>
<button id="btn">加载天气...</button>
<script>
$("#btn").click(function(){
$.ajax({
url:"http://127.0.0.1:3000/index/",
type:"get",
dataType:"jsonp", //原理同方案4
success:function(res){
document.write(res);
}
})
});
</script>
后端文件中:
var express=require("express")
var router=express.Router();
//jsonp方式跨域
router.get("/",(req,res)=>{
var weather="北京 晴 26~32";
res.writeHeader(200,{"Content-Type":"text/plain;charset=utf-8"});
var fun=req.query.callback; //必须是callback,ajax发送的时候只能是callback
res.end(`${fun}('${weather}')`);//填充式json:jsonp 把数据装入js语句当中发回就叫填充式jsonp
});
注意:
因为xhr不允许发送ajax跨域,由于jquery里面封装的是xhr对象,所以 jquery不能发送ajax跨域
解决:加上 datatype:jsonp,原理:不再是ajax请求而是script请求
加上jsonp之后原理其实是在head当中动态加载script,用完加马上删掉
jsonp
四:Vuejs 发送ajax请求:
一、概况
①vuejs中没有内置任何ajax请求方法
②在vue1.0版本,使用的插件 vue resource 来发送请求,支持promise
③在vue2.0版本,使用社区的一个第三方库 axios ,也支持promise
④在HTML5时代,浏览器增加了一个特殊的异步请求方法 fetch,原生支持promise,由于兼容性问题,一般用于移动端
⑤还有的项目会使用vue和jquery混用,借助jQuery的ajax方法
二、axios库的使用
①安装和引入:
npm直接下载axios组件,下载完毕后axios.js就存放在
node_modules\axios\dist中:
npm install axios
网上直接下载axios.min.js文件,或者使用cdn,通过script src的方式进行文件的引入:
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
②发送get请求
基本使用格式:
axios([options]) #这种格式直接将所有数据写在options里,options其实是个字典
axios.get(url[,options]);
传参方式:
通过url传参,通过params选项传参
案例:
<div id="app">
<button @click='send'>发送Ajax请求</button>
<button @click='sendGet'>GET方式发送Ajax请求</button>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script src="node_modules/axios/dist/axios.min.js"></script>
<script>
new Vue({
el:'#app',
data:{
user:{name:'eric',age:24},
},
methods:{
send(){
axios({
method:'get',
url:'http://www.baidu.com?name=jack&age=30'
}).then(function(resp){
console.log(resp.data);
}).catch(err=>{
console.log('请求失败:'+err.status+','+err.statusText);
});
},
sendGet(){
axios.get('server.php',{
params:{name:'tom',age:20}
}).then(resp=>{
console.log(resp.data)
}).catch(resp=>{
console.log('请求失败:'+err.status+','+err.statusText);
});
},
},
});
</script>
③发送post请求(push,delete的非get方式的请求都一样)
基本使用格式:
axios.post(url,data,[options]);
传参方式:
自己拼接为键值对;使用transformRequest,在请求发送前将请求数据进行转换;如果使用模块化开发,可以使用qs模块进行转换;
注意:
axios默认发送post数据时,数据格式是Request Payload,并非我们常用的Form Data格式,所以参数必须要以键值对形式传递,不能以json形式传参
案例:
<div id="app">
<button @click='sendPost'>post方式发送Ajax请求</button>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script src="node_modules/axios/dist/axios.min.js"></script>
<script>
new Vue({
el:'#app',
data:{
user:{name:'eric',age:24},
},
methods:{
sendPost(){
axios.post('server.php',this.user,{
transformRequest:[
function(data){
let params='';
for(let index in data){
params+=index+'='+data[index]+'&';
}
return params;
}
]
}).then(resp=>{
console.log(resp.data)
}).catch(err=>{
console.log('请求失败:'+err.status+','+err.statusText);
});
},
},
});
</script>
④发送跨域请求:axios本身并不支持发送跨域的请求,没有提供相应的API,作者也暂没计划在axios添加支持发送跨域请求,所以只能使用第三方库,可以使用vue-resource发送跨域请求
五。vue resource发送ajax请求
如果项目中没有vue-resource,先安装vue-resource :
npm install vue-resource –save
引用:再主入口main.js中(因为都要用到):
import VueResource from 'vue-resource' //node_module中的库
使用vue-resource
Vue.use(VueResource)
在组件中使用vue-resource
加载resource后,this里面多一个属性$http
发送get请求:
this.$http.get('data.php',{'name':123}).then(function(response){
this.posts=response.data;
})
发送post请求
resource中的post请求默认将数据使用request payload方式进行发送,这里应该加入以下代码。转换数据发送格式。否则可能会导致后端收不到post数据:
Vue.http.options.emulateJSON = true;
Vue.http.options.headers = {
'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
};
简写发送post请求
this.$http.post('data.php',{'name':123}).then(function(response){
this.posts=response.data;
})