[学习笔记] 动态网页开发基础之Ajax与jQuery

# 学习 # · 2020-09-27

认识Ajax

1、传统Web开发技术和Ajax技术的区别:

(1)发送请求方式不同:传统Web应用通过浏览器发送请求;Ajax技术通过JavaScript的XMLHttpRequest对象。

(2)服务器响应不同:传统Web应用服务器的响应是一个完整的页面;Ajax技术服务器响应的是需要的数据。

(3)客户端处理的响应方式不同:传统Web应用发送请求后,浏览器重新加载整个页面;Ajax技术发送请求后,通过JavaScript动态更新页面中需要更新的部分。

2、Ajax(Asynchronous JavaScript and XML):是由JavaScript、XML、CSS等几种现有技术整合而成的技术。

3、Ajax技术的执行流程:用户界面出发JavaScript。通过Ajax因为ing(XMLHttpRequest对象)异步发送请求到服务器,服务器返回XML、JSON或HTML等格式的数据,利用返回的数据使用DOM和CSS技术局部更新界面。

4、XMLHttpRequest:

(1)创建XMLHttpRequest:

//老版本IE(IE5和IE6)
XMLHttpRequest = new ActiveObject("Microsoft.XMLHttp");
//新版本IE和其他大部分浏览器
XMLHttpRequest = new XMLHttpRequest;

(2)XMLHttpRequest对象常用属性:

onreadtstatechange    //设置回调函数
readyState    //返回请求的当前状态,0(未初始化)、1(开始发送请求)、2(发送完成)、3(读取响应)、4(读取结束)
status    //返回HTTP状态码
statusText    //返回当前请求的响应状态
responseText    //以文本形式获取响应值
responseXML     //以XML形式获取响应值并解析成DOM对象返回

(3)XMLHttpRequest对象常用方法:

//①创建一个新的HTTP请求
open(String method, String url, boolean async,    String user, String password);
//method:设置HTTP请求的方法,如GET、POST
//url:请求的URL地址
//async:可选,指定此请求是否为异步方法,默认为true
//user和password:可选参数

//②发送请求到服务端
send(String data);    //发送请求到服务端
//data:取决于open()方法中的method,如果method=GET,则data=null

//③取消当前请求
abort();

//④单独设置请求的某个HTTP头信息
setRequestHeader(String header, String value);
//header:头名称
//value:请求头的值

//⑤从响应中获取指定的HTTP头信息
getResponseHeader(String header);

//⑥获取响应的所有HTTP头信息
getAllResponseHeader();

使用XMLHttpRequest实现Ajax

1、创建XMLHttpRequest对象:

if(window.XMLHttpRequest) {
    //如果真,说明是新版本IE或其他浏览器
    xmlHttpRequest = new XMLHttpRequest();
} else {
    xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}

2、设置回调函数:

xmlHttpRequest.onreadystatechange = callback;

3、初始化XMLHttpRequest组件,发送请求。

/**
 * GET请求
 **/
var url = "UserServlet?name=" + name;    //服务端URL地址
xmlHttpRequest.open("GET", url);    //调用open()方法创建一个新的HTTP请求,
xmlHttpRequest.send(null);    //调用send()方法发送请求

/**
 * POST请求
 **/
var url="UserServlet";
xmlHttpRequest.open("POST", url);
//POST需要设置请求头Content-type
xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
var data = "name=" + name;
xmlHttpRequest.send(data);

4、回调函数处理服务器响应:

function callback() {
    if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {
        //如果读取结束且HTTP状态为200,则以文本形式获取响应
        var data = xmlHttpRequest.responseText;
        if(data == "true") {
            alert("用户名不正确!");
        } else {
            alert("用户名正确!");
        }
    }
}

5、Servlet处理:

String name = request.getParameter("name");
boolean result = false;
//对name进行判断
if("admin".equals(name)) {
    result = true;
}
//输出结果
out.print(result);

使用jQuery实现Ajax:

1、$.ajax([setting])方法:

String url    //发送请求的地址,默认为当前页面的地址
String type    //请求方式,POST或GET(默认),1.9.0之后用method代替type
PlainObject或Array data    //发送到服务器的数据
String dataType    //预期服务器返回的数据类型,如XML、HTML、JSON、JSONP、Text等
function beforeSend    //发送请求前调用函数,可用于设置请求头
funcrion success    //请求成功后调用的函数
function error    //请求失败时被调用的函数
function complete    //请求完成后调用的函数(无论成功失败)
Number timeout    //设置请求超时的时间
Boolean global    //默认为true,表示触发全局Ajax事件

2、使用$.ajax实现GET:

$.ajax({
    "url":"UserServlet",
    "type":"GET",
    "data":"name=" + name,
    "dataType":"text",
    "success":callback,
    "error":function(){
        alert("请求出现错误!");
    }
});

function callback(data) {
    //成功回调处理
}

处理JSON格式的响应数据

1、JSON(JavaScript Object Notation):轻量级的数据交换格式,基于JavaScript的一个子集,采用完全独立于语言的文本格式。JSON类似于实体类对象,通常用来在客户端和服务端之间传递数据。

2、定义JSON对象:

var JSON对象 = { name:value, name:value... }
var person = { "id":1, "name":"张三" }

3、定义JSON数组:

var JSON数组 = [ value, value... ];
var city = ["泉州", "漳州", "厦门"];
var pseron = [
    {
        "id":1,
        "name":"张三"
    },
    {
        "id":2,
        "name":"李四" 
    }
]

4、展示JSON数据:

//JSON对象
console.log("name:" + pseson.name);

//JSON字符串数组
$(city).each(
    function() {
        console.log(this);
    }
);

//JSON对象数组
$(person).each(
    function() {
        console.log("id:" + this.id + "name:" + this.name);
    }
);

5、在Ajax中使用JSON数据格式:

(1)$.ajax实现:

$.ajax({
    "url":"UserServlet",
    "type":"GET",
    "data":"action=list",
    "dataType":"json",
    "success":callback,
    "error":function(){
        alert("请求出现错误!");
    }
});

function callback(data) {
    for(var i = 0; i < data.length;) {
        alert("第" + (i+1) + "组数据为:id=" + data[i].id + ",name=" + data[i].name);
    }
}

(2)Servlet实现:

//拼装JSON数组格式的响应内容
String jsonStr = "[{\"id\":1,\"name\":\"张三\"},{\"id\":2,\"name\":\"李四\" }]";
//输出内容
out.print(jsonStr);
如无特殊说明,本博所有文章均为博主原创。

如若转载,请注明出处:一木林多 - https://www.l5v.cn/archives/127/

评论