ajax技术介绍

前言

关于ajax对于大多数前段框架,都自己在jquery的ajax基础上进行了封装,底层原理实现大致一致,了解ajax实现方式,并能够使用原生ajax方式编程,在后续基础上在慢慢了解原生ajax实现的底层代码即可.

1 ajax简介

ajax技术相当于异步js和xml。ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。传统的网页(不使用 ajax)如果需要更新内容,必需重载整个网页面。

web发展过程中,为了改善传统web应用中,请求–>等待–>响应这种模式的弊端和提高用户的体验度,相对于传统的模型:服务器响应数据之前,用户对页面不能进行其他操作,导致用户体验较差.从而导致ajax技术:服务器响应数据之前,用户对于页面还是可以操作的,等优势来提高用户体验度和交互体验.

ajax在javascript中使用ajax技术,调用浏览器提供的XMLHttpRequest对象进行请求访问.向服务器发送的请求是异步的,此时浏览器没有丢失任何数据,用户仍然可以对页面进行操作.

2 ajax技术实现描述

(2.1)、创建XMLHttpRequest 对象

    *XMLHttpRequest对象   是      AJAX    的基础。
    -->  使用Ajax  必须先得到XMLHttpRequest对象

    *XMLHttpRequest xmlReq = new XMLHttpRequest();
        (IE5 和 IE6 使用 ActiveXObject)
        IE5&IE6 没有 XMLHttpRequest 对象
        需要获取 ActiveXObject
        (移动、联通、电信、广电  -->   OA 管理系统  全部必须  运行在(ie)  IE6 上)

    *对于不同浏览器  获取的方式不一样(IE7 以下的版本)

(2.2)、向服务器发送请求

    *XMLHttpRequest对象 
        open(method    ,url     ,async);  -->  对请求进行设定(请求地址,请求方式,同异步)
            post|get   请求地址 同步|异步
            async:参见JAVA同步锁
        send();  -->  发送

    *get
        open(method    ,url     ,async); //需要携带数据,在url后面拼接
        send();//不能 传参

    *post
        open(method    ,url     ,async);
        //如果有参数  需要设定 请求头的 contextType
        setRequestHeader("Content-type","application/x-www-form-urlencoded");
        send();//如果有参数,可以写在send(参数)  string类型的-->key=value&key1=value1……

(2.3)、等待服务器响应,处理响应结果

    onreadystatechange = 方法    循环调用方法

    readyState  的状态码     判断什么时候执行
        0: 请求未初始化(没有调用open())
        1: 服务器连接已建立(有没有调用  send())
            **过渡状态
                2: 请求已接收
                3: 请求处理中
        4: 请求已完成,且响应已就绪 
            ** responseText  默认值是一个空字符串
                  当请求状态没有变成4时  即便浏览器已经拿到了数据
                  也不会 将拿到的值  赋值给responseText,
                  当请求状态变为4时,才会去赋值

    status  的页面状态码   判断响应是不是正常,常见的状态码有:200,404,500,403,201

3 ajax请求几种实现方式

(3.1) $.getJSON(url,data,callback); // 是以 HTTP get 方式提交请求

url:        ajax请求地址
data:       ajax请求时需要携带的参数
callback:   ajax请求完成时调用函数(function)
getJSON 接收的是服务返回的字符串,将返回的字符串,按照JSON格式字符串进行转换成JSON对象。
function(data){   
        // data 表示的时  请求后  服务器返回的JSON对象
}

(3.2) $.post(url,data,callback,type) 是以 HTTP post 方式提交请求

 url:       ajax请求地址
 data:      ajax请求时需要携带的参数
 callback:  ajax请求完成时调用函数       
 function(data){   
    // data 表示的时  请求后  服务器返回数据
 }
 type:指定返回数据的类型
 方法本身根据type指定的类型进行预处理
 被返回的数据的类型 (html,xml,json,jasonp,script,text)
 如果不指定默认是响应头中Content-Type 指定的类型
 根据返回的字符串格式进行自动转换   

(3.3) $.get(url,data,callback,type)是以 HTTP get 方式提交请求

url:        ajax请求地址
data:       ajax请求时需要携带的参数
callback:   ajax请求完成时调用函数
function(data){   
    // data 表示的时  请求后  服务器返回数据
}
type:       指定返回数据的类型
方法本身根据 type 指定的类型  进行预处理
被返回的数据的类型 (html,xml,json,jasonp,script,text)
如果不指定默认是响应头中Content-Type 指定的类型
根据返回的字符串格式进行自动转换

(3.4) $(selector).load(url,data,callback)

把远程数据加载到被选的元素中,正常的ajax请求发送,服务器正常响应,load获取到数据,将数据直接写入到  调用  load方法的  元素中
url:        ajax请求地址
data:       ajax请求时需要携带的参数
callback:   ajax请求完成时调用函数
function(data){   
    // data 表示的时  请求后  服务器返回数据
}

(3.5) $.ajax(options) jquery的普通AJAX方法

options -->   json格式的字符串     (用户自定义)
key:value,key:value   
async           同异步   true|false
data            请求需要传递的参数   JSON格式字符串|String
dataType        请求服务器,服务器返回的数据类型   text|json|xml|html|script|jsonp
error           请求错误时执行的方法    function(){}
success         请求成功后执行的方法    function(){}
type            请求类型   get|post|put|delete 
url             请求地址    
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值