深度了解Ajax技术

1.什么是Ajax?

Ajax技术是使浏览器可以为用户提供更为自然的浏览体验

2.Ajax核心

Ajax的核心是JavaScript对象XmlHttpRequest

该对象在Internet Explorer 5中首次引入,它是一种支持异步请求的技术。简而言之,XmlHttpRequest使用户可以使用JavaScript向服务器提出请求并处理响应,而不阻塞用户。

特点:无刷新局部更新数据,至2016年,各大网站几乎都有使用。

3.Ajax的优势与缺点

优势:迅捷的反应速度

a.不需要插件支持

b.优秀的用户体验

c.提高Web程序性能

扫描二维码关注公众号,回复: 11227700 查看本文章

d.减轻服务器负担

缺点:

a.XmlHttpRequest对象浏览器支持不足,早些年只有IE浏览器支持(现已解决)

b.破坏 浏览器的“前进”、“后退”按钮的正常功能(现已解决)

c.对浏览器搜索引擎支持不足,无法搜索关键字(仍未解决)

d.开发和调试工具缺乏(仍未解决)webstorm可以

4.Ajax的应用

jQuery对Ajax进行了封装,可用其方法

a.底层方法:$.ajax()       一般用这种方法,直观快捷,二三层方法都是基于底层方法,需要调用底层方法

语法:$.ajax(options)     

options是key/value形式,均为可选

示例:

$("#send").click(function(){

    $.ajax({

        type:"get",   //提交方式

        url:"test.asp", //地址

        success:function(){}    //执行成功的回调函数

        ......  //可以写执行失败的回调函数

    });

});

b.第二层方法:load() 、$.get()、$.post()      get和post方法只有提交方式不同,其余一样,默认get方法

load()方法   将远程页面的响应代码插入DOM中

语法:load(url,[data],[callback])

url : 请求页面的地址

data(可选):  发送到服务器的key/value数据

callback(可选): 请求完成时的回调函数(无论请求成功或者请求失败)

注意:无参data时以get方式提交,有参data时以post方式提交

示例:

$(function(){

$("#send").click(function(){

$("#resTex").load("test.html");

});

});

$(function(){

    $("#send").click(function(){

    $("#resTex").load("test.html",{name:"xxx",age:"21"},)

    function(responseText,textStatus,XMLHttprequest){

        alert(responseText);     //请求访问的内容

        alert(textStatus);      //请求的状态(成功或失败)

        alert(XMLHttprequest);   //XMLHttprequest对象

    };

    });

});

$.get( ) 方法和 $.post( ) 方法

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

url:请求页面的 url

data(可选):发送到服务器的 key/value数据

callback(可选):请求完成时的回调函数(只有成功才被调用)

type(可选):返回内容的格式(text, html, xml, script, json)

示例;

$("#send").click(function(){     //$.get()方法

    $.get("AjaxHandler.ashx",

        {name: "张三", age:"21"},

        function (data, status) {

            $("#div").html(data);

        });

});

//$.post()方法

$("#send").click(function(){

    $.post("AjaxHandler.ashx",

        {name: "张三", age:"21"},

        function (data, status) {

            $("#div").html(data);

        });

});

c.第三层方法:$.getScript()、$getJSON()

$.getScript( ) 与 $.getJSON( ) 方法

$.getScript( ):动态引入JS文件

语法:
 $.getScript( JS文件的url ,[callback] )

 $.getJSON( ):加载JSON文件

  语法:
 $.getJSON( JSON文件url ,[callback] ) 

5.具体使用步骤

//1.创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
 
//2.初始化XMLHttpRequest xhr.open("post","data/data1.txt",true); true表示异步请求
//3.设置回调函数
xhr.onreadystatechange = function(){
    //readyState的值:0-未初始化,1-已初始化,2-已发送请求,还未接到响应,3-接到服务器响应数据,未完成,4-数据接收完成
    //HTTP响应状态码:2xx : 成功,3xx : 请求需要进一步细化,4xx : 客户端错误,5xx : 服务器错误
    if(xhr.readyState==4 && xhr.status==200){
        document.getElementById("d1").innerHTML = xhr.responseText;
    }
};
 
//4.发送请求 xhr.send(null);

这里顺便推荐一个高质量的java公众号,赶紧关注领取免费资料吧!

猜你喜欢

转载自blog.csdn.net/qq_35942348/article/details/52862788