一、ajax初识
1.ajax的作用
获取服务器的数据
2.ajax的效果
在不刷新整个页面的前提下,通过一个url地址获取服务器的数据,然后进行页面的局部刷新
3.ajax的用途
评论加载效果、用户名验证
4.小结
局部 异步 刷新
ajax------->>>Asynchronous Javascript And XML,就是使用JS代码获取服务器数据
二、使用
简单来说Ajax就是一个异步的JavaScript请求,用来获取后台服务端的数据,而不是整个界面进行跳转
在元素JS中来实现Ajax主要的类就是XMLHttpRequest,它的使用一般有四个步骤:
1.创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
2.准备发送网络请求
xhr.open('get',url,true);
调用open方法,这里面有三个参数,第一个参数代表的是这个http请求是以get方式还是post方式。如果是get请求,有参数的话需要将参数跟在url后面;
如果是post请求,参数应该跟在请求体中。
第二个参数就是这个http请求的URL地址,URL地址后面是否有?加参数取决于第一个参数是get还是post
第三个参数代表这个http请求时同步还是异步的。false代表同步,true代表异步,这个参数一般都是写true。
3.开始发送网络请求
xhr.send();
调用send方法,传递一个null。需要注意的是,请求方式为get,这里传null;请求方式为post,这里就需要传入你所需要传递给服务器的参数。post请求的参数并不是跟在url后面的。因此对于post请求,需要在这里传递参数:
var param ='username'+uname;
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencode");
xhr.send(param);
如果使用post请求,并且有参数的话,对于xhr就必须设置请求头信息,否则服务器无法接受到参数。
4.指定回调函数
xhr.send()方法调用完之后,http请求就发送出去了。由于在第二步中我们将请求设置为异步,异步请求无法直接获得结果,只能通过监听回调的方式得到响应数据。
xhr.onreadystatechange = function(){
if(xhr.readyState==4&&xhr.status==200){
alert(xhr.responseText);}}
上述代码的4和200代表正常得到数据,服务器响应正常。这时我们就可以通过xhr.responseText来获取到服务器给我们返回的数据。
三、同步与异步
将true改为false;
此时界面会卡顿,卡顿的时间取决于网络速度;
xhr.onreadystatechange 的回调将不会被执行,需要修改代码后才能获取到数据,将回调去除即可。
JS代码是单线程的,从上往下按顺序依次执行,一定是上一行代码执行完在执行下一行代码,一次只能做一件事。
setTimeout(function(){console.log(“定时函数代码执行了”);},0);
var str ="";
for(var i=0;i<100000;i++){
str+=i;
}
console.log("正常代码执行了");
在上面的代码执行时,将定时函数被放到事件队列中存起来,之后继续向下执行for循环,等到正常代码执行完之后,js在空闲状态下,会查询事件队列,看是否有方法达到了触发状态,此时会将代码丛事件队列里取出来执行。
四、数据格式
数据格式-----规范化数据的结构
json数据格式类似于js中的对象方式,通过key-value(键值对)的形式组装。体积小,传输快
五、封装Ajax
对于封装方法,我们主要考虑几个方面:
1.那些东西是变的;
2.那些是不变的;
3.如何将结果通知调用者;
4.如何调用方便。
不同场景的ajax调用,调用方法是get还是post是有可能发生改变的,调用url地址也是会变的,请求参数也是会变的,返回数据的类型也是会变的。对于这些发生改变的东西我们可以通过参数传递的方式实现。
基础代码:创建XMLHttpRequest对象,准备发送、执行发送,响应回调中有些代码是固定不变的。
将结果通知调用者也可通过在调用和四川入一个方法就可以实现。
如果将那些变量一个一个传递,会导致调用不方便,参数传递的顺序不能改变而且参数没有默认值,每次都要传递。此时我们可以将封装的参数变为一个对象。
obj={
url:"xxx",
type:"get",
dataType:"json"};
function myAjax(obj){
var default={
type:"get",
url:"#",
dataType:"json",
data:{},
async:true};`在这里插入代码片`
如果一些属性只存在于obj中,会给default中增加属性
如果有一些属性在obj和default中都存在,会将default中的默认值覆盖
如果有一些属性只在default中存在,obj中不存在,这时候default中将保留预定义的默认值
//将obj中的属性覆盖到default属性上
for(var key in obj){
default[key]
=obj[key]};
}
六、jquery中使用Ajax
对于jQuery中关于ajax的封装,他提供了很多方法供开发者进行调用。不过这些封装都是基于一个方法
.
a
j
a
x
(
)
进
行
修
改
。
最
经
常
使
用
的
是
.ajax() 进行修改。 最经常使用的是
.ajax()进行修改。最经常使用的是.ajax(),
.
g
e
t
(
)
,
.get(),
.get(),.post();
$.ajax()的使用时传入一个对象,有些参数不传递的话也具有默认值,实现步骤同上述类似。
$.ajax(){
url:url,
data:{},
success:function(result){},
dataType:"json"};
jQuery中对于网络请求还有一些其他方法,但本质上都是对XMLHttpRequest的封装,如: . g e t ( ) 和 .get()和 .get()和.post();看着两个方法名字就很清楚, . g e t ( ) 针 对 g e t 请 求 , .get()针对get请求, .get()针对get请求,.post()针对post请求