ajax学习总结

ajax是什么

全称Asynchronous Javascript and XML(异步javascript和XML);它的出现揭开了无刷新更新页面的新时代;

ajax的5种状态

1.(0未初始化)还没有调用send()方法;

  此阶段确认XMLHttpRequest对象是否创建,并为调用open()方法进行未初始化作好准备。值为0表示对象已经存在,否则浏览器会报错--对象不存在。

2.(1载入)已调用send()方法,正在发送请求;

  此阶段对XMLHttpRequest对象进行初始化,即调用open()方法,根据参数(method,url,true)完成对象状态的设置。并调用send()方法开始向服务端发送请求。值为1表示正在向服务端发送请求。

3.(2载入完成)send()方法执行完成,已经接收到全部响应内容;

  此阶段接收服务器端的响应数据。但获得的还只是服务端响应的原始数据,并不能直接在客户端使用。值为2表示已经接收完全部响应数据。并为下一阶段对数据解析作好准备。

4.(3交互)正在解析相应内容;

  此阶段解析接收到的服务器端响应数据。即根据服务器端响应头部返回的MIME类型把数据转换成能通过responseBody、responseText或responseXML属性存取的格式,为在客户端调用作好准备。状态3表示正在解析数据。

5.(4完成)响应内容解析完成,可以在客户端调用了;

  此阶段确认全部数据都已经解析为客户端可用的格式,解析已经完成。值为4表示数据解析完毕,可以通过XMLHttpRequest对象的相应属性取得数据。

  1. /*声明用来装入XMLHttpRquest对象*/
    var xhr;
    
    /*if ie5-ie6以ActiveXObject方式引入XMLHttpRequest对象;
       else windowsde的子对象;   
    */
    if(window.ActiveXObject){
       xhr=new Active XObject("Miceosoft.XMLHTTP");       
    }else{
       xhr=new XMLHttpRequest();   
    }
    
    /*实例化成功后,open()方法初始化XMLhHttpRequest对象,指定HTTP方法和使用的服务器url*/
    xhr.open("GET","test.php",true)
    xhr.open('post','test.php',true);/*注册XMLhHttpRequest对象回调函数,当readyState值改变时,激发onreadystatechange事件*/ xhr.onreadystatechange=RequestCallBack; /*使用send()方法发送请求,get方式参数可以为空*/ xhr.send(null)
    xhr.send('name1=value1&name2=value2');
    /*请求状态改变时,调用RequestCallBack,当readystate=4并且http状态200,执行*/ function RequestCallBack(){ if(xhr.readyState==4){ if(xhr.status==200){ //xhr.responseText; } } }

jquery中的ajax

一、get和post方式的不同

1.get会将参数跟在url后面进行传递,而post请求则是作为http消息的实体内容发送给web服务器,在ajax中这两种区别对用户是不可见的;

2.get方式对数据的大小有限制(2kb),而post方式传递的数据要不get方式大得多;

3.get方式请求的数据会被浏览器缓存起来,存在安全问题,而post方式可以避免这些问题;

4.服务器端的获取方式不相同,get通过$_GET[]获取,post通过$_POST[]获取,都可用$_REQUEST[]来获取;

二、常用方法

load(url,[data],[callabck]);load()方法传递参数没有参数是get方式,有参数是post方式,自动指定;回调函数3个参数,返回的内容、请求状态(success/error/notmodified/timeout)、XMLHttpRequest对象;在load()方法中ajax请求成功与否回调函数都会被触发。

$.get(url,[data],[callback],[type]);$.post(url,[data],[callback],[type]);type包括xml/html/script/json/text/_default;回调函数只有在请求成功后才被执行;html最简单,xml文档可移植性很强是未来的主流数据交换格式;json应用也比较多。

$.getScript()用到js文件时候再加载;

$.getJSON()加载json,通过回调函数对返回的数据进行处理,利用$.each()遍历对象和数组。$.each()不同于jquery的each()对象,不错做jquery对象,而是以一个数组或对象作为第一个参数,以一个回调函数作为第二个参数,回调函数拥有两个参数对象成员和数组索引,

$(function(){
  $("#send").click(function(){
    $.getJSON('test.php',function(){
      var html='';
      $.each(data,function(textindex,text){
        html+='<div class='xxx'></div>'
      })
      $("xxxx").html(html);
    })
  })
})

通过使用JSONP形式的回调函数加载器他网站的json数据。

$.ajax(options)方法

url:string 发送请求地址;

type:string  请求方式  默认是get方式;

timeout:number  设置请求超时时间;

data:object或string  ;

dataType:string  xml、html、script、json、jsonp、text;

beforesend:function ;

conplete:function 请求完成后调用的回调函数;

success:function 请求成功后调用的回调函数,有两个参数data、textStatus;

error:function 请求失败  三个参数XMLHttpRequest对象、错误信息、捕获的错误信息;

global:boolean 默认true触发全局ajax,AjaxStart或AjaxStop可用于控制各种ajax时间;

$.ajax()方法是jquery最底层的ajax实现,因此可以替代前面所有的方法;

人是在一天天内提高的,只有不断努力才不会被淘汰!
原文地址:https://www.cnblogs.com/bais/p/4702765.html