Ajax
传统网站问题
- 网速慢的时候,页面加载时间长,用户只能等待。
- 表单提交后,如果内容不合适,需要重新填写表单所有内容。
- 页面跳转,重新加载页面,造成资源浪费,增加用户等待时间。
Ajax是什么
可以页面无刷新更新数据,提高用户浏览网站体验。不刷新情况下像服务器请求数据。
Ajax应用场景
1.页面上加载更多数据
2.列表数据无刷新分页。
3.表单离开焦点数据验证,如验证邮箱是否已经注册。
4.搜索框提示下来列表。
Ajax运行环境
Ajax技术需要进行在网站环境中才能生效。把代码放在html中,把html文件文在静态资源文件夹中,这样通过域名访问html中。
Ajax原理
- Ajax相当于浏览器发送请求与接受响应的代理人,以实现在不影响用户浏览页面的情况下,局部更新也看数据,从而提高用户体验。
- 可发人员可控
实现步骤
- 创建Ajax对象
- 告诉Ajax请求地址和请求方式
- 客户端像服务端发送请求
- 获取服务端给与客户端的相应数据。
服务端影响的数据格式
- 服务端多数情况下以JSON对象作为响应数据的格式。当客户端拿到响应数据时,将JSON数据和HTML字符串拼接,然后将拼接结果展示到页面中。
//json字符串转化为json对象
json.parse()
传递请求参数
- 传统:www.baidu.com?username=zhangsan&password=123456
- ajax的get方法:
xhr.open('get',www.baidu.com?username=zhangsan&password=123456)
var params = 'username='+nameValue + '&age' + ageValue;
xhr.open('get','http://www.baidu.com/get?+params);
- 请求报文:HTTP请求和响应过程中传递的数据块叫报文,包括要传送的数据和一些附加信息,这些信息要遵守规定的好的格式。可以理解为客户端对服务端说的话。
var params = 'username='+nameValue + '&age' + ageValue;
//配置ajax对象
xhr.open('post','http://www.baidu.com/post');
//设置请求参数格式的类型(post必须设置)
xhr.setRequestHeader('Content-Type','application/http://www.baidu.com');
//发送请求
xhr.send(params);
//获取服务器相应的数据
xhr.onload = function(){
console.log(xhr.responseText);
}
请求格式
- 除了
username=zhangsan&password=123456
这种形式,还有json - json格式:(name:‘zhangsan’,age:‘20’)。必须将json对象转化为json字符串,
JSON.stringify({name:'lisi',age:50}
。请求方式必须post。
var params = 'username='+nameValue + '&age' + ageValue;
//1.配置ajax对象
xhr.open('post','http://www.baidu.com/json');
//2.设置请求参数格式的类型(post必须设置)
xhr.setRequestHeader('Content-Type','application/json');
//3.发送请求
xhr.send(JSON.stringify({name:'lisi',age:50}));
//4.获取服务器相应的数据
xhr.onload = function(){
console.log(xhr.responseText);
}
同步和异步
- ajax是异步代码,最后执行。
Ajax封装
- 封装函数:发送一次请求代码过多。多次发送代码冗杂。所以要封装成函数。
请求参数位置和格式
- 请求参数传递到ajax函数内部,在函数内部根据请求方式的不同将请求参数放置不同的位置。get放在请求地址后面、post放在send里。
- 请求参数:利用&连接、json格式。
- 函数内部用字符串类型更好
<script>
function ajax(options) {
var defaults = {
type = 'get',
url = '',
data = {},
header = {
'Content-Type':'application/x-www-form'
}
};
// 用户传了就是用户的,没传就用defaults的
// 覆盖
Object.assign(defaults,options);
// 1.创建ajax对象
var xhr = new XMLHttpRequest();
xhr.open(defaults.type,defaults.url);
var str = '';
for (var k in defaults.data) {
str+=k + '=' +defaults.data[k]+'&';
}
// 将最后一个&截取
str.substr(0,str.length-1);
// 判断请求方式
if(defaults.type == 'get'){
defaultss.url = options.url + '?' + str;
}
//2.发送请求
if(defaults.type == 'post'){
var contentType = defaults.header['Content-type']
xhr.setRequestHeader('Content-Type','options.header');
// 判断是否为json
if(contentType == 'application/json'){
xhr.send(JSON.stringfy(options.data));
}else {
xhr.send(str);
}
}else{
xhr.send();
}
// 3.当xhr对象接收完响应数据后触发
xhr.onload = function() {
// 获取响应头的数据
var contentTypr = xhr.getResponseHeader('content-Type');
// 如果响应类型包含application/json
if(contentType.includes('application/json')){
// 将json字符串转化为json对象
responseText = JSON.parse(responseText);
}
// 如果失败
if(xhr.status == 200){
defaults.success(xhr.responseText,xhr);
}else{
defaults.error(xhr.responseText,xhr);
}
}
}
ajax({
// 对象
// 请求方式
// type:'get',
//请求地址
url:'http://localhost:3000/first',
// data: {
// name: 'zhangsan',
// age: '20'
// },
// header: {
// 'Content-Type':'application/json'
// },
success: function(data){
console.log('这里是success函数'+ data);
},
// error: function(data){
// console.log('这里是error函数'+ data);
// console.log('xhr');
// }
});
</script>