ajax的初次接触

一、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的封装，他提供了很多方法供开发者进行调用。不过这些封装都是基于一个方法 $.ajax()进行修改。最经常使用的是$.ajax(),$.get(),$.post();
$.ajax()的使用时传入一个对象，有些参数不传递的话也具有默认值，实现步骤同上述类似。

$.ajax(){
url:url,
data:{},
success:function(result){},
dataType:"json"};

jQuery中对于网络请求还有一些其他方法，但本质上都是对XMLHttpRequest的封装，如：$.get()和$.post()；看着两个方法名字就很清楚，$.get()针对get请求，$.post()针对post请求