ajax基础

Ajax
ajax就是在页面没有刷新或者跳转的情况下还可以更新页面的某一部分数据
ajax的优势:在不刷新页面的情况下,更新页面数据,提升用户体验。ajax能够实现异步工作
 
Ajax: Asynchronous javascript and xml(异步JavaScript和xml)
ajax 并不是一种新技术,而是已有技术的集合,JavaScript是核心载体
 
ajax 他是浏览器提供的一套方法,可以实现页面无刷新更新数据,提高用户浏览网站的体验
ajax的应用场景: 页面的上拉/下拉加载更多数据、数据分页、表单验证(失去焦点)、搜索框提示文字下拉列表
 
ajax运行环境
ajax技术需要运行在网站环境中才能生效,
 
ajax运行原理
ajax相当于浏览器发送请求与接收响应的代理人,以实现在不影响用户浏览页面的情况下,局部更新数据,从而提高用户体验

ajax的使用步骤
1.创建Ajax对象:要分为IE版本(低版本)和非IE版本
IE 浏览器(IE7之前)
var xhr =new ActiveXObject('Msxml2.XMLHTTP');
非IE浏览器(chrome、firefox、opare、safair、搜狗等,包括IE7+之后):
var xhr = new XMLHttpRequest();
兼容写法:
 
//创建XMLHttpRequest对象,兼容低版本IE和非IE浏览器
function getXhr() {
  var xmlhttp;
// 判断如果 window中有XMLHttpRequest对象
if (window.XMLHttpRequest) { //IE7+ 和 非IE 中都有 XMLHttpRequest对象 xmlhttp = new XMLHttpRequest(); } else { xmlhttp = new ActiveXObject('Msxml2.XMLHTTP'); } return xmlhttp; }
2.请求方式
XMLHttpRequest对象有了,可以发送ajax请求了,发送请求需要两个方法
open(var1,var2,var3);准备ajax请求
xhr.open(var1,var2,var3)
/*参数:var1: 请求方式  get/post
      var2: 请求的后端程序地址,后端可以是 php  jsp  asp Python等等
      var3: 异步(true)/同步(false),可选参数,默认为true
*/
3.发送请求
xhr.send(var)
/*参数var: 分为两种情况。 如果是get请求,则填写null。 如果是post请求,则填写要发送到后端的数据*/
4.获取服务器响应到客户端的数据
核心属性----readyState
ajax的整个过程有5个状态,对应readyState的5个值:0--4
0:创建ajax对象了
1:已经调用open方法了
2:已经调用send方法了
3:服务器返回了部分数据
4:服务器数据返回完毕,ajax请求完毕
核心事件------ onreadyStatechange
onreadystatechange事件:readyState的值每次发生变化都会触发该事件 总共会触发4次
其他重要属性---responseText
以字符串形式接收后端程序的返回值
(以PHP为例:PHP程序最终会被解释程序一段字符串,responseText叫收的就是这段字符串)
function getxhr() {
// 创建一个空的字符串 用于接收 判断的数据
    var xmlHttp;
// b
    if(window.XMLHttpRequest) {
// b
        xmlhttp = new XMLHttpRequest();
    } else {
     //
        xmlhttp = new ActiveXObject('Msxml2.XMLHTTP');
    }
// 把结果给返回出去
    return xmlhttp;
    }
}
// 用一个变量接收
var xhr = getxhr()
//
xhr.open('get/post','请求的地址')
//
xhr.send(null)
xhr.onreadystatechange = function(){
  if(xhr.readyState == 4){
    // 请求到的结果
    console.log(xhr.responseText)        
    }  
} 
 
 
什么是缓存?
浏览器的请求需要从服务器获得许多 css、img、js 等相关的文件,如果每次请求都把相关的资源文件加载一次,对 带宽、服务器资源、用户等待时间 都有严重的损耗。如果浏览器将css、img、js等文件在第一次请求成功后就保存在本机上,以后的每次请求就在本机获得相关的资源文件,那么就可以明显地加快用户的访问速度,同时可以节省各种资源(带宽、服务器资源、用户等待时间)。
ajax方式,get会有缓存问题
解决方法: 
①前端解决方法:在open准备ajax请求时,为请求的地址增加随机后缀,相当于每次请求的都是新地址,
xhr.open('get','请求的地址'+Math.random()) // 随机后缀
②后端解决方法:后端设置不允许缓存的头信息,
PHP程序固定使用如下3句话
header('cache-controller:no-cache');
header('Pragam:no-cache');
header('Expires:-1');
 
同步/异步 
    同步
      同步的思想是:所有的操作都做完,才返回给用户。这样用户在线等待的时间太长,给用户一种卡死了的感觉(就是系统迁移中,点击了迁移,界面就不动了,但是程序还在执行,卡死了的感觉)。这种情况下,用户不能关闭界面,如果关闭了,即迁移程序就中断了。
      异步
      将用户请求放入消息队列,并反馈给用户,系统迁移程序已经启动,你可以关闭浏览器了。然后程序再慢慢地去写入数据库去。这就是异步。但是用户没有卡死的感觉,会告诉你,你的请求系统已经响应了。你可以关闭界面了。
 
      同步和异步本身是相对的
      同步就相当于是 当客户端发送请求给服务端,在等待服务端响应的请求时,客户端不做其他的事情。当服务端做完了才返回到客户端。这样的话客户端需要一直等待。用户使用起来会有不友好。
      异步就是,当客户端发送给服务端请求时,在等待服务端响应的时候,客户端可以做其他的事情,这样节约了时间,提高了效率。
      存在就有其道理 异步虽然好 但是有些问题是要用同步用来解决,比如有些东西我们需要的是拿到返回的数据在进行操作的。这些是异步所无法解决的。
 
 
 
 jQuery的$.get和$.post方法
$.get(var1,var2,var3,var4)
参数:
参数1: 请求的后台程序的地址
参数2: 要发送到后台程序的数据,json对象/js对象(推荐)或者 字符串
参数3: 当readyState==4时的触发函数,该函数中有一个参数,就是后台程序返回的数据
参数4: 设置返回数据的类型: text(默认) json xml
示例:
$.get('getData.php', {"goods_id":10101, "_":Math.random()}, function(msg){
    alert(msg);
}, 'json');
 
$.post(var1,var2,var3,var4)
参数:
参数1: 请求的后台程序的地址
参数2: 要发送到后台程序的数据,json对象/js对象(推荐) 或者 字符串
参数3: 当readyState=4时的触发函数,该函数中有一个参数,就是后台程序返回的数据
参数4: 设置返回数据的类型: text(默认) json xml
 示例:
$.post('getData.php', {"goods_id":10101}, function(msg){
    alert(msg);
}, 'json');
 
$.ajax(obj) 使用JS对象来配置ajax请求
必须配置项:
url: 要请求的后台程序地址
data: 要发送到后台程序的数据 (建议使用json对象格式)
type: 请求类型 post和get 两种
dataType: 返回值类型 text(默认) 、 json 、xml 、 jsonp(跨域使用)
success: 成功完成ajax触发的事件,回调函数,其参数是后端程序的返回数据
error: 失败后
其他配置项:
cache: 是否进行缓存(true/fasle),如果设置type为get,一般设置该项为false(不缓存)。
async: 同步/异步设置,true(异步、默认) false(同步)。
timeout: 超时设置,多少ms之后扔未接收到后端返回数据,则结束本次请求。--- 进入error方法中 error: 请求失败时的回调函数,该函数有三个参数。参数1是xhr对象,参数2是错误信息(错误信息通常是 "null", "timeout", "error", "notmodified" 和 "parsererror"),参数3是异常对象。
complete: Ajax完成时的回调函数。
beforeSend: 发送Ajax之前执行的回调函数。
contentType: 头信息设置,使用FormData对象时设置该值为false,其他情况会自动设置,不需要手动设置。
processData: 处理数据方式,使用FormData对象时设置该值为false,其他情况会自动设置,不需要手动设置。
注意: ==contentType和processData只有在使用FormData对象时设置,其余情况均不用设置==
$.ajax({
    url:"http://www.microsoft.com",    //请求的url地址
    dataType:"json",   //返回格式为json
    async:true,//请求是否异步,默认为异步,这也是ajax重要特性
    data:{"id":"value"},    //参数值
    type:"POST",   //请求方式
    beforeSend:function(){
        //请求前的处理
    },
    success:function(req){
        //请求成功时处理
    },
    complete:function(){
        //请求完成的处理
    },
    error:function(){
        //请求出错处理
    }
});
 
 

1.url
要求为String类型的参数,(默认为当前页地址)发送请求的地址。

2.type
要求为String类型的参数,请求方式(post或get)默认为get。注意其他http请求方法,例如put和delete也可以使用,但仅部分浏览器支持。

3.timeout
要求为Number类型的参数,设置请求超时时间(毫秒)。此设置将覆盖$.ajaxSetup()方法的全局设置。

4.async
要求为Boolean类型的参数,默认设置为true,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为false。注意,同步请求将锁住浏览器,用户其他操作必须等待请求完成才可以执行。

5.cache
要求为Boolean类型的参数,默认为true(当dataType为script时,默认为false),设置为false将不会从浏览器缓存中加载请求信息。

6.data
要求为Object或String类型的参数,发送到服务器的数据。如果已经不是字符串,将自动转换为字符串格式。get请求中将附加在url后。防止这种自动转换,可以查看  processData选项。对象必须为key/value格式,例如{foo1:"bar1",foo2:"bar2"}转换为&foo1=bar1&foo2=bar2。如果是数组,JQuery将自动为不同值对应同一个名称。例如{foo:["bar1","bar2"]}转换为&foo=bar1&foo=bar2。

7.dataType
要求为String类型的参数,预期服务器返回的数据类型。如果不指定,JQuery将自动根据http包mime信息返回responseXML或responseText,并作为回调函数参数传递。可用的类型如下:
xml:返回XML文档,可用JQuery处理。
html:返回纯文本HTML信息;包含的script标签会在插入DOM时执行。
script:返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时(不在同一个域下),所有post请求都将转为get请求。
json:返回JSON数据。
jsonp:JSONP格式。使用SONP形式调用函数时,例如myurl?callback=?,JQuery将自动替换后一个“?”为正确的函数名,以执行回调函数。
text:返回纯文本字符串。

8.beforeSend
要求为Function类型的参数,发送请求前可以修改XMLHttpRequest对象的函数,例如添加自定义HTTP头。在beforeSend中如果返回false可以取消本次ajax请求。XMLHttpRequest对象是惟一的参数。
            function(XMLHttpRequest){
               this;   //调用本次ajax请求时传递的options参数
            }
9.complete
要求为Function类型的参数,请求完成后调用的回调函数(请求成功或失败时均调用)。参数:XMLHttpRequest对象和一个描述成功请求类型的字符串。
          function(XMLHttpRequest, textStatus){
             this;    //调用本次ajax请求时传递的options参数
          }

10.success:要求为Function类型的参数,请求成功后调用的回调函数,有两个参数。
         (1)由服务器返回,并根据dataType参数进行处理后的数据。
         (2)描述状态的字符串。
         function(data, textStatus){
            //data可能是xmlDoc、jsonObj、html、text等等
            this;  //调用本次ajax请求时传递的options参数
         }

11.error:
要求为Function类型的参数,请求失败时被调用的函数。该函数有3个参数,即XMLHttpRequest对象、错误信息、捕获的错误对象(可选)。ajax事件函数如下:
       function(XMLHttpRequest, textStatus, errorThrown){
          //通常情况下textStatus和errorThrown只有其中一个包含信息
          this;   //调用本次ajax请求时传递的options参数
       }

  

 第一个参数 jqXHR jqXHR:这里的jqXHR是一个jqXHR对象,在Jquery1.4和1.4版本之前返回的是XMLHttpRequest对象,1.5版本以后则开始使用jqXHR对象,该对象是一个超集,就是该对象不仅包括XMLHttpRequest对象,还包含其他更多的详细属性和信息。这里主要有4个属性:
   readyState: 当前状态, 0 - 未初始化,1 - 正在载入,2 - 已经载入,3 - 数据进行交互,4 - 完成。
   status  :返回的HTTP状态码,比如常见的404, 500等错误代码。
   statusText :对应状态码的错误信息,比如404错误信息是not found, 500是Internal Server Error。
   responseText :服务器响应返回的文本信息
 第二个参数 String textStatus:返回的是字符串类型,表示返回的状态,根据服务器不同的错误可能返回下面这些信息:"timeout"(超时), "error"(错误), "abort"(中止), "parsererror"(解析错误),还有可能返回空值。
 第三个参数 String errorThrown:也是字符串类型,表示服务器抛出返回的错误信息,如果产生的是HTTP错误,那么返回的信息就是HTTP状态码对应的错误信息,比如404的Not Found, 500错误的Internal Server Error。

12.contentType
要求为String类型的参数,当发送信息至服务器时,内容编码类型默认为"application/x-www-form-urlencoded"。该默认值适合大多数应用场合。

13.dataFilter
要求为Function类型的参数,给Ajax返回的原始数据进行预处理的函数。提供data和type两个参数。data是Ajax返回的原始数据,type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。
            function(data, type){
                //返回处理后的数据
                return data;
            }

14.dataFilter
要求为Function类型的参数,给Ajax返回的原始数据进行预处理的函数。提供data和type两个参数。data是Ajax返回的原始数据,type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。
            function(data, type){
                //返回处理后的数据
                return data;
            }

15.global
要求为Boolean类型的参数,默认为true。表示是否触发全局ajax事件。设置为false将不会触发全局ajax事件,ajaxStart或ajaxStop可用于控制各种ajax事件。

16.ifModified
要求为Boolean类型的参数,默认为false。仅在服务器数据改变时获取新数据。服务器数据改变判断的依据是Last-Modified头信息。默认值是false,即忽略头信息。

17.jsonp
要求为String类型的参数,在一个jsonp请求中重写回调函数的名字。该值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分,例如{jsonp:'onJsonPLoad'}会导致将"onJsonPLoad=?"传给服务器。

18.username
要求为String类型的参数,用于响应HTTP访问认证请求的用户名。

19.password
要求为String类型的参数,用于响应HTTP访问认证请求的密码。

20.processData
要求为Boolean类型的参数,默认为true。默认情况下,发送的数据将被转换为对象(从技术角度来讲并非字符串)以配合默认内容类型"application/x-www-form-urlencoded"。如果要发送DOM树信息或者其他不希望转换的信息,请设置为false。

21.scriptCharset
要求为String类型的参数,只有当请求时dataType为"jsonp"或者"script",并且type是GET时才会用于强制修改字符集(charset)。通常在本地和远程的内容编码不同时使用。

 
 
a
原文地址:https://www.cnblogs.com/maxiag/p/12334522.html