文章目录
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);
});