文章目录
1. Ajax
- Ajax,Asynchronous JavaScript and XML , 异步的JavaScript 和 XML
- Ajax 中,最核心的部分是JavaScript
2. 异步请求 和 同步请求
- 同步:请求(request)和响应(response)同步,发送方发出数据后,等接收方发回响应以后才发下一个数据包的通讯方式。
- 异步:发送方发出数据后,不等接收方发回响应,接着发送下个数据包的通讯方式。
3. Ajax 的应用
- 搜索框自动补全
- 地图
- 视频播放
- 登录
- 检查用户名
- 分页
- 级联操作
- 增删改查
4. Ajax实现思路
- Ajax可以在页面不刷新的情况下,使用javascript通过XmlHttpRequest对象,和服务器进行交互。
- Ajax是通过Http请求发送请求,获取少量数据,是页面局部刷新,不需要加载整个页面。
5. Ajax 的核心组件: XMLHttpRequest
6. Ajax的编写步骤(原生JavaScript)
-
创建引擎
-
编写回调函数
-
建立连接
-
发送数据
//创建引擎xmlHttpRequest var xhr = new XMLHttpRequest(); //编写回调函数,接收服务响应的数据 xhr.onreadystatechange = function () { }; //建立连接 xhr.open("get", "/AjaxServlet01"); //发送数据 xhr.send(null);
7. API详解
7.1 xmlhttp 对象创建
var xmlhttp;
if (window.XMLHttpRequest) {
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp = new XMLHttpRequest();
}
else {
// IE6, IE5 浏览器执行代码
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
7.2 xmlhttp属性及事件设置
-
onreadystatechange :当state状态发生改变时,触发的事件。
-
readyState 接收服务器响应状态,没当状态发生改变都会调用onreadystatechange属性后面的回调函数
- readyState 属性可能的值:
- 0 请求未初始化(在调用 open() 之前)xmlHttpRequest对象创建时的状态
1 请求已提出(调用 send() 之前),在调用open()方法时,建立连接
2 请求已发送(这里通常可以从响应得到内容头部) 调用send()方法时状态
3 请求处理中(响应中通常有部分数据可用,但是服务器还没有完成响应)
4 请求已完成(可以访问服务器响应并使用它)服务器数据已经响应完毕,已经将数据存储到引擎对象中,现在已经可以用引擎对象中的数据
- 0 请求未初始化(在调用 open() 之前)xmlHttpRequest对象创建时的状态
- readyState 属性可能的值:
-
stauts 服务器响应的状态码
- 常用的状态码:
- 200(服务器响应正常)
- 302(重定向)
- 304(未修改,浏览器走缓存)
- 404(请求的资源不存在)
- 405(请求方式不正确)
- 406(请求参数不对)
- 500(服务器内部错误)
- 常用的状态码:
xmlhttp.onreadystatechange = function () {
//服务器已经将数据响应到引擎中,服务器响应正常
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
//接收到数据,处理数据
//接收的数据类型是xml
// xmlhttp.responseXML
//接收的数据类型是字符串
var responseText = xmlhttp.responseText;
if(responseText){
//获取到span
var span = document.getElementById("usernameId");
span.innerHTML=responseText;
}
}
}
7.3 xmlhttp打开请求
开启异步请求:通过xmlhttp对象的open()函数实现。
- open(method,url,async,user,password)
- method 请求方式
- get 参数会追加到url上
- post请求使用send方法发送数据
- url 后台服务器的请求路径,这里不是相对路径,url是绝对路径
- async true 表示异步,页面可以异步刷新,false表示是同步,同步必须等到后台服务完全响应之后才可以做其他的事情
//获取username表单的值
var username = document.getElementById("user-name-label");
var usernameVal = username.value;
xmlhttp.open("POST", "/AjaxServlet02", true);
-
post请求必须设置请求的头,设置请求头,必须在打开连接之后,发送数据之前。
xmlhttp.setRequestHeader("content-type","application/x-www-form-urlencoded")
7.4 xmlhttp发送请求
通过xmlhttp对象的 send() 函数发送请求。
-
get请求,send方法不需要发送数据,send方法可以不写任何内容,但是考虑到浏览器版本兼容问题,一般建议写null
xmlhttp.send("username="+usernameVal);
-
如果是post请求使用key=value的格式,发送数据到服务器
xmlhttp.send("username="+usernameVal);
8. jQuery实现Ajax
8.1 jQuery.ajax(url,[settings])
-
jQuery.ajax(url,[settings]):通过 HTTP 请求加载远程数据。
- url:一个用来包含发送请求的URL字符串。
- settings:AJAX 请求设置。所有选项都是可选的。
-
settings:选项
- data:待发送 Key/value 参数。
- type:返回内容格式,xml, html, script, json, text, _default。
- async:(默认: true) 默认设置下,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为 false。注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。
beforeSend(XHR)Function - data:发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组,jQuery 将自动为不同值对应同一个名称。如 {foo:[“bar1”, “bar2”]} 转换为 “&foo=bar1&foo=bar2”。
- dataType:预期服务器返回的数据类型。如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息来智能判断。可用值:
- “xml”: 返回 XML 文档,可用 jQuery 处理。
- “html”: 返回纯文本 HTML 信息;包含的script标签会在插入dom时执行。
- “script”: 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了"cache"参数。’’‘注意:’’'在远程请求时(不在同一个域下),所有POST请求都将转为GET请求。(因为将使用DOM的script标签来加载)
- “json”: 返回 JSON 数据 。
- “jsonp”: JSONP 格式。使用 JSONP 形式调用函数时,如 “myurl?callback=?” jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。
- “text”: 返回纯文本字符串
- error:请求失败时调用此函数。
- success(data, textStatus, jqXHR) :请求成功后的回调函数。参数:由服务器返回,并根据dataType参数进行处理后的数据。
- type:请求方式 (“POST” 或 “GET”), 默认为 “GET”。
- url:发送请求的地址。
$(document).ready(function(){
$.ajax({
url: "queryAllZhuanYe.action",
type: "post",
success:function(data){
// alert(data)
$(data).each(function(i,o){
$("#zhuanYe_Id").append("<option value='"+o.zhuanYe_Id+"'>"+o.zhuanYe_Name+"</option>");
})
},
dataType:"json"
})
})
$.ajax({
url: "checkCourserName.action",
type: "post",
data: {"courseName":$(this).val().trim()},
success:function(data){
if(data == "true"){
$("#info").html('课程名已存在')
flag = false;
}else{
$("#info").html('课程名可用')
flag = true;
}
}
})
8.2 jQuery.get(url, [data], [callback], [type])
- jQuery.get(url, [data], [callback], [type]) : 通过远程 HTTP GET 请求载入信息。
- url:待载入页面的URL地址
- data:待发送 Key/value 参数。
- callback:载入成功时回调函数。
- type:返回内容格式,xml, html, script, json, text, _default。
$.get("test.php", function(data){
alert("Data Loaded: " + data);
});
$.get("test.cgi", { name: "John", time: "2pm" },
function(data){
alert("Data Loaded: " + data);
});
8.3 jQuery.post(url, [data], [callback], [type])
- jQuery.post(url, [data], [callback], [type]) : 通过远程 HTTP POST 请求载入信息。
- url:发送请求地址。
- data:待发送 Key/value 参数。
- callback:发送成功时回调函数。
- type:返回内容格式,xml, html, script, json, text, _default。
$.post("test.php", { name: "John", time: "2pm" },
function(data){
alert("Data Loaded: " + data);
});
$.post("test.php", { "func": "getNameAndTime" },
function(data){
alert(data.name); // John
console.log(data.time); // 2pm
}, "json");
8.4 jQuery.getScript(url, [callback])
jQuery.getScript(url, [callback]) : 通过 HTTP GET 请求载入并执行一个 JavaScript 文件。
- url:待载入 JS 文件地址。
- callback:成功载入后回调函数。
描述:
加载并执行 test.js ,成功后显示信息。
jQuery 代码:
$.getScript("test.js", function(){
alert("Script loaded and executed.");
});
8.5 jQuery.getJSON(url, [data], [callback])
jQuery.getJSON(url, [data], [callback]) :通过 HTTP GET 请求载入 JSON 数据。
- url:发送请求地址。
- data:待发送 Key/value 参数。
- callback:载入成功时回调函数。
$.getJSON("test.js", function(json){
alert("JSON Data: " + json.users[3].name);
});