Ajax了解（一）

【AJAX的概述】

AJAX使用的是老的技术,新的思想.完成了RIA的应用:Rich Internet Application.

* 传统方式的开发：所有的数据提交到服务器端进行处理.(胖服务器)

* AJAX的方式开发：有一部分的代码写在客户端.

同步：

异步：

【AJAX的作用】

完成页面局部刷新而不影响用户的体验.

* 用户名是否已经存在的校验

* 百度信息输入的提示

...

【使用Ajax】

JavaScript和XML

* XMLHttpRequest:

    * 属性：

        * onreadystatechange:

        * readyState:

            * 0（未初始化）：对象已建立，但是尚未初始化（尚未调用open方法）

            * 1（初始化）：对象已建立，但是未调用send方法

            * 2（发送数据）：send方法已经调用，但是当前的状态及http未知

            * 3（数据发送中）：已接受数据，因为响应头及http不全，这是通过responseBody和responseText获取部分数据会出现错误

            * 4（完成）：数据已接受完毕，这是可以通过responseBody和responseText获取完整的回应数据

        * status：获得获得状态码

        * response：获得响应的文本

    *方法：

        *open（“请求方式”，“请求路径”，“是否异步”）

        *send（“提交的参数”）

        *setRequestHeader（“头信息”，“头的值”）

【Ajax的GET入门】

创建XMLHttpRequest

function createXMLHttpRequest() {

var xmlHttp;

try { // Firefox, Opera 8.0+, Safari

xmlHttp = new XMLHttpRequest();

} catch (e) {

try {// Internet Explorer

xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");

} catch (e) {

try {

xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

} catch (e) {

}

}

}

 

return xmlHttp;

}

 

AJAX的代码：

function loadData() {

// 1.创建异步XMLHttpRequest对象

var xhr = createXMLHttpRequest();

// 2.设置状态改变触发一个函数

xhr.onreadystatechange = function(){

// 回调函数.

if(xhr.readyState == 4){// 请求发送完成

if(xhr.status == 200){// 响应也正确

var data = xhr.responseText;

document.getElementById("d1").innerHTML=data;

}

}

}

// 3.打开一个连接：

xhr.open("GET","/WEB15/ServletDemo1",true);

 

// 4.发送请求

xhr.send(null);

}

【AJAX的POST入门】

function loadData(){

// 1.创建异步对象

var xhr = createXMLHttpRequest();

// 2.设置状态改变触发的函数

xhr.onreadystatechange = function(){

if(xhr.readyState == 4){

if(xhr.status == 200){

document.getElementById("d1").innerHTML=xhr.responseText;

}

}

}

// 3.打开连接

xhr.open("POST","/WEB15/ServletDemo2",true);

xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

// 4.发送数据

xhr.send("name=李四&password=456");

}

【使用JQuery完成异步用户名的校验】

【Jquery的AJAX部分的概述】

由于传统AJAX开发代码比较麻烦,而且还有浏览器兼容的问题.传统的AJAX的使用在企业中是很少的.使用AJAX的一些框架完成.

 

JQuery的AJAX部分的API：

* $(“”).load(url,data,function(){});

* $.get(url,data,function(){},dataType);

* $.post(url,data,function(){},dataType);

* $.ajax();

【Jquery的AJAX的部分的使用】

引入JQuery的JS.

【Jquery的AJAX的部分的入门】

// jquery的load方法

$(function(){

// 给按钮1绑定一个click事件：

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

$("#d1").load("/WEB15/ServletDemo4",{"name":"张三","password":"123"},function(data){

if(data == 1){

$(this).html("张三");

}else{

$(this).html("其他");

}

});

});

});

 

// 使用jquery的get方法:

$(function(){

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

$.get("/WEB15/ServletDemo4",{"name":"李四","password":"345"},function(data){

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

});

});

});

 

//使用jquery的post方法:

$(function(){

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

$.post("/WEB15/ServletDemo4",{"name":"王五","password":"456"},function(data){

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

});

});

});

 

// 使用jquery的ajax方法:

$(function(){

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

$.ajax({

type:"post",

url:"/WEB15/ServletDemo4",

data:"name=aaa&password=123",

success:function(data){

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

}

});

});

});

1.1.1 代码实现：

$(function(){

// 给用户名的文本框绑定一个事件：

$("#username").blur(function(){

// 获得文本框的值:document.getELementById().value;

var username = $(this).val();

// 使用jquery的ajax的操作异步发送请求.

$.post("/WEB15/ServletDemo3",{"username":username},function(data){

if(data==1){

// 用户名可以使用

$("#s1").html("<font color='green'>用户名可以使用</font>");

$("#regBut").prop("disabled",false);

}else if(data==2){

// 用户名已经存在

$("#s1").html("<font color='red'>用户名已经被占用</font>");

$("#regBut").prop("disabled",true);

}

});

});

});