ajax基础-阿里云开发者社区

开发者社区> 开发与运维> 正文

ajax基础

简介: AJAX AJAX简介 ajax分类 ajax的语法 表示一个对象 表示一个由对象组成的数组 将java对象转换成json字符串 ajax实现过程 获取ajax对象 配置请求对象的信息 发送请求 监听Ajax引擎对象的改变是否正确做出了响应 Ajax引擎的状...

AJAX

AJAX简介:

  是一种用来改善”用户体验”的技术,其实质是利用浏览器内置的一个对象 (ajax对象)异步地向服务器发送请求。服务器送回部分数据,浏览器利用 这些数据对当前页面做部分更新,整个过程,页面无刷新,不打断用户的 操作。
  一种轻量级的数据交换格式。
  注:
   数据交换
    将数据转换成一种与平台无关的数据格式(比如xml),然后发送给接收方 来处理。
   轻量级
    相对于xml,json的文档更小,解析速度更快。
AJAX指异步 JavaScript 及 XML
不是一种新的编程语言,而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术,是基于JavaScript、XML、HTML、CSS新用法

Ajax:只刷新局部页面的技术

  •   JavaScript:更新局部的网页

  •   XML:一般用于请求数据和响应数据的封装

  •   XMLHttpRequest对象:发送请求到服务器并获得返回结果

  •   CSS:美化页面样式

  •   异步:发送请求后不等返回结果,由回调函数处理结果

注:
  异步:指的是当ajax对象向服务器发送请求时,浏览器不会销毁 当前页面,用户仍然可以对当前页面做其它的操作。
  部分数据:一般不需要返回完整的页面。一般是以文本或者xml的形式 返回。
JavaScript中XMLHttpRequest对象是整个Ajax技术的核心,它提供了异步发送请求的能力

ajax分类

一般我们会将jquery的ajax方法习惯性的分为三种:

第一种:原始方法            
$.ajax([options]) :jquery的ajax最底层的方法,可以认为其他的ajax的操作都是基于此方法的。           
第二种:常用方法            
"load(url, [data], [callback]) :对象调用的方法,可以是get请求也可以是post请求"         
"$.get(url, [data], [fn], [type]) :get提交方式"            
"$.post(url, [data], [fn], [type]) :post提交方式"          
第三种:高级方法            
"$.getJSON(url, [data], [fn]) "            
"$.getScript(url, [callback]) "

ajax的语法

表示一个对象

{属性名:属性值,属性名:属性值…}

注意:
- 属性名必须使用双引号括起来。
- 属性值可以是string,number,true/false,null,object。
- 属性值如果是string,必须使用双引号括起来。
比如:

var obj ={“code”:”600015”,”name”:”山东高速”,”price”:10}

表示一个由对象组成的数组

[{},{},{}….]

var arr = [{"code":"600015",
            "name":"山东高速",
            "price":10},
            {"code":"300002","name":"深万科","price":20}
        ];

将java对象转换成json字符串

通过使用json官方提供的工具(比如json-lib),也可以使用其它 组织或者公司提供的工具(比如google提供的工具)。
JSONObject: 单个对象的转换
JSONArray:对象组成的集合或者数组的转换

  JSONArray arr = JSONArray.fromObject(stocks);

ajax实现过程

  • 第一步:Javascript监听浏览器网页事件(点击,提交,更改等)

  • 第二步:由javascript创建Ajax引擎对象

  • 第三步:通过Ajax引擎对象发出请求

  • 第四步:Ajax引擎等待并且接受服务器的响应内容

  • 第五步:javascript再从Ajax引擎对象中获取响应内容,并且通过dom改变网页界面显示效果

获取ajax对象

因历史原因,要区分浏览器(IE5 和 IE6 使用 ActiveXObject))

function getXhr(){
    var xhr = null;
    if(window.XMLHttpRequest){
        //非ie浏览器或者IE7版本以上
        xhr = new XMLHttpRequest();
    }else{
        ///老版本的Internet Explorer使用ActiveX对象
        xhr = new ActiveXObject("MicroSoft.XMLHttp");
    }
    return xhr;
}
</script>

配置请求对象的信息

xhr.open(‘GET/POST’,’url地址’,[‘是否异步’]);

注意:如果使用post请求,就一定要设置请求头

xhr.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded;charset=gb2312”);

发送请求

xhr.send([post请求参数字符串]);
发送请求分为两种情况:
1.监控用户的事件(onclick,onchange等),通过ajax发送请求
2.监控浏览器的事件(onload),通过ajax发送请求.

监听Ajax引擎对象的改变(是否正确做出了响应)

xmlHttpRequest.onreadystatechange = function(){
    if (xmlHttpRequest.readyState== 4 && xmlHttpRequest==200) {
            //xmlHttpRequest.responseText
            //xmlHttpRequest.responseText
    }
}

Ajax引擎的状态属性readyState(0 1 2 3 4)

  • 0.请求未初始化
  • 1.服务器连接已建立
  • 2.请求已接收
  • 3.请求处理中
  • 4.请求已完成,并且响应已就绪
      当Ajax引擎的状态属性为readyState为4时,说明服务器的响应已经发送给Ajax请求了.

HTTP状态码(xmlHttpRequest)

  • 100:信息类,表示web浏览器请求,正在进一步的处理中
  • 200:成功,表示用户请求被正确接收正在进一步的处理中 200 OK
  • 300:表示请求没有成功,客户端必须采取进一步的动作
  • 400:客户端错误,表示客户端提交的请求有错误 例如:404 NOT Found,意味着
    请求中所引用的文档不存在
  • 500:服务器错误 表示服务器不能完成对请求的处理,如500

onreadystatechange

onreadystatechange属性是一个方法,监控到响应内容的返回,根据响应内容使用javascript改变当前页面的部分html代码,从而达到不刷新改变局部html代码.当Ajax引擎的**状态发生改变时都会执行**onreadystatechange属性对应的方法

方法:

方法 描述
abort 取消当前请求
getAllResponseHeaders 获取响应的所有http头
getResponseHeader 从响应信息中获取指定的http头
open(method,url,async) 创建一个新的http请求,打开请求,并指定此请求的方法、URL以及验证信息(用户名/密码)
 注:method:请求的类型:GET或POST;
  url:文件在服务器上的位置;
  async:true(异步)或false(同步)
send() 发送请求到http服务器并接收回应
setRequestHeader 单独指定请求的某个http头,header()设置http头协议信息

属性:

属性 描述
onreadystatechange 指定当readyState属性改变时的事件处理句柄。
readyState 返回当前请求的状态,ajax行进过程中不同状态
responseBody 将回应信息正文以unsigned byte数组形式返回.
responseStream 以Ado Stream对象的形式返回响应信息。
responseText 将响应信息作为字符串返回.只读
responseXML 将响应信息格式化为Xml Document对象并返回,只读
status 返回当前请求的http状态码. 200 ok 304 缓存;404 not found; 403 没有权限 501 服务器级别错误
statusText 返回当前请求的响应行状态文本, ok not found forbidden

jquery对ajax技术的支持

$.ajax函数

语法

$.ajax({
url:地址,
type:请求类型,
data:提交数据,
async:同步|异步,
dataType:服务器返回数据类型,
success:成功回调函数,
error:错误回调函数
});

dataType 预期服务器返回的数据类型

  • xml“: 返回 XML 文档,可用 jQuery 处理。
  • html“: 返回纯文本 HTML 信息;包含的 script 标签会在插入 dom 时执行。
  • script“: 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 “cache” 参数。注意:在远程请求时(不在同一个域下),所有 POST 请求都将转为 GET 请求。(因为将使用 DOM 的 script标签来加载)
  • json“: 返回 JSON 数据 。
  • jsonp“: JSONP 格式。使用 JSONP 形式调用函数时,如 “myurl?callback=?” jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。
  • text“: 返回纯文本字符串

这里写图片描述

  如果指定为 json 类型,则会把获取到的数据作为一个 JavaScript 对象来解析,并且把构建好的对象作为结果返回。为了实现这个目的,它首先尝试使用 JSON.parse()。如果浏览器不支持,则使用一个函数来构建。
  JSON 数据是一种能很方便通过 JavaScript 解析的结构化数据。如果获取的数据文件存放在远程服务器上(域名不同,也就是跨域获取数据),则需要使用 jsonp 类型。使用这种类型的话,会创建一个查询字符串参数 callback=? ,这个参数会加在请求的 URL 后面。服务器端应当在 JSON 数据前加上回调函数名,以便完成一个有效的 JSONP 请求。如果要指定回调函数的参数名来取代默认的 callback,可以通过设置 $.ajax() 的 jsonp 参数。

  JSONP 是 JSON 格式的扩展。它要求一些服务器端的代码来检测并处理查询字符串参数。
  如果指定了 script 或者 jsonp 类型,那么当从服务器接收到数据时,实际上是用了 <script> 标签而不是 XMLHttpRequest 对象。这种情况下,$.ajax() 不再返回一个 XMLHttpRequest 对象,并且也不会传递事件处理函数,比如 beforeSend。

例子:

        //异步地向服务器发请求,并且依据
        //服务器返回的结果(json字符串)更新数据。
        $.ajax({
            url:'quoto.do',
            type:'get',
            dataType:'json',
            success:function(data){
                //data:是服务器返回的数据,
                //如果返回的是json字符串,
                //会自动转换成相应的js对象或者js对象组成的数组。
                //如果返回的是xml文档,我们需要使用  
                //$函数将其包装$(data)成一个jQuery  
                $('#tb1').empty(); //先清空tbody
                for(i = 0; i < data.length; i ++){
                    var s = data[i];
                    $('#tb1').append(
                            '<tr><td>' + s.code
                            + '</td><td>' + s.name 
                            + '</td><td>' + s.price
                            + '</td></tr>');
                }
            }
        });

load方法

 作用
   将服务器返回的数据直接添加到符合要求的dom对象上
   相当于 obj.innerHTML = 服务器返回的数据

 用法:
  $obj.load(url,[请求参数]);
  url : 请求地址
  请求参数 :
    第一种形式:请求字符串,比如: ‘username=zs&age=22’
    第二种形式:对象,比如 {‘username’:’zs’,’age’:22}

这里写图片描述

注意
- load方法如果没有参数,会使用get方式发请求。如果有参数,会使用post方式发请求。
- 如果有中文参数值,load方法已经帮我们做了编码处理。

$(function(){  
 $('a.s1').toggle(function(){  
    var airline = $(this).parent().siblings().eq(0).text();  
    $(this).next().load('priceInfo.do','airline=' + airline);  
    $(this).html('显示经济舱价格');  
 },function(){  
    $(this).next().empty();  
    $(this).html('显示所有票价');  
 });  
});  

.get.post()方法

作用:
  向服务器发送get或者post请求 (get请求ie有缓存问题)

用法:
  $.get(url,[data],[callback],[type]);
  $.post(url,[data],[callback],[type]);

  • url : 请求地址
  • data : 请求参数,形式同上。
  • callback : 回调函数,可以通过该函数来处理服务器返回的数据。

     callback格式:
      function(data,statusText)
         其中,data可以获得服务器返回的数据,
         statusText是一个简单的字符串,描述服务器处理的状态。

这里写图片描述

http协议(补充)

  作用:客户端向服务端发送请求信息和服务

  客户端:自己的计算机的浏览器(web浏览器)

  服务端:服务器,一台高性能的计算机,作为存储,处理网络上的数据,信息(web服务器)
  服务器指一个管理资源并为用户提供服务的计算机软件,通常分为文件服务器、数据库服务器和应用程序服务器。运行以上软件的计算机或计算机系统也被称为服务器。
  特点:是一种无状态的协议(不建立持久的连接,服务端不保留连接的信息)

一个完整的HTTP请求过程的七个步骤:

  • 建立TCP连接
  • web浏览器向web服务器发送请求命令
  • web浏览器发送请求头信息
  • web服务器应答
  • web服务器发送应答头信息
  • web服务器向浏览器发送数据
  • web服务器关闭TCP连接

HTTP请求的四部分组成:

1.HTTP**请求的方法或动作**,比如GET还是POST
2.正在请求的URL,总得知道请求的地址是什么
3.请求头,包含一些客户端环境信息,身份验证信息等
4.请求体,也就是请求正文,请求正文中可以包含客户提交的查询字符串信息,表单信息等等;

HTTP请求方法

GET:
  一般用于信息获取,用get请求–>查询或获取的操作
    使用URL传递参数
    对所发送信息的数量有限制,一般在2000个字
POST:
  一般用于修改服务器上的数据.比如:新建,修改,删除,发送表单数据
  对所发送信息的数量无限制

HTTP响应一般由三部分组成:

1.一个数字和文字组成的状态码,用来显示请求是成功还是失败
2.响应头:响应头也和请求头一样包含许多有用的信息,例如
服务器类型,日期时间,内容类型和长度等
3.响应体,也就是响应正文

HTTP状态码

100:信息类,表示web浏览器请求,正在进一步的处理中
200:成功,表示用户请求被正确接收正在进一步的处理中 200 OK
300:表示请求没有成功,客户端必须采取进一步的动作
400:客户端错误,表示客户端提交的请求有错误 例如:404 NOT Found,意味着请求中所引用的文档不存在
500:服务器错误 表示服务器不能完成对请求的处理,如500

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章