开发工具与关键技术:Visual Studio / 向服务器发送请求、onreadystatechange事件
作者:郑名方
撰写时间:2019年4月 25日
Ajax的操作是jQuery库技持完成。下面表格的函数分为三个类型:请求、事件、还有其他。请求分别是: . a j a x 、 l o a d 、 .ajax、load、 .ajax、load、.get、 . g e t J S O N 、 .getJSON、 .getJSON、.getScript、 p o s t 。 事 件 分 别 是 : a j a x C o m p l e t e 、 a j a x E r r o r 、 a j a x S e n d 、 a j a x S t a r t 、 a j a x S t o p 、 a j a x S u c c e s s 。 其 他 分 别 是 : post。事件分别是:ajaxComplete、ajaxError、ajaxSend、ajaxStart、ajaxStop、ajaxSuccess。其他分别是: post。事件分别是:ajaxComplete、ajaxError、ajaxSend、ajaxStart、ajaxStop、ajaxSuccess。其他分别是:. ajaxPrefilter、$. ajaxSetup、serialize、serializeArray。
函数 | 描述 |
---|---|
.ajaxComplete() | 当Ajax请求完成后注册一个回调函数。这是一个Ajax Event。 |
.ajaxError() | Ajax请求出错时注册一个回调函数,这是一个Ajax Event。 |
.ajaxSend() | 在AJAX请求刚开始执行一个处理函数。这是一个Ajax Event。 |
.ajaxStart() | 在AJAX请求完成时执行一个处理函数。这是一个Ajax Event。 |
.ajaxStop() | 绑定一个函数当Ajax请求完成时执行。这是一个Ajax Event。 |
.ajaxSuccess() | 绑定一个函数当Ajax请求成功完成时执行。这是一个Ajax Event。 |
jQuery.ajax() | 执行一个异步的HTTP(Ajax)的请求。 |
jQuery.ajaxPrefilter() | 在每个请求之前被发送和$.ajax()处理它们前处理,设置自定义Ajax选项或修改现有选项。 |
jQuery.ajaxSetup() | 为以后要用到Ajax请求设置默认的值。 |
jQuery.ajaxTranspost() | 创建一个对象,用于处理Ajax数据的实际传输。 |
jQuery.get() | 使用一个HTTP GET请求从服务器加载数据。 |
jQuery.getJSON() | 使用一个HTTP GET请求从服务器加载JSON编码的数据。 |
jQuery.getScript() | 使用一个HTTP GET请求从服务器加载并执行一个JavaScript文件 |
jQuery.param() | 创建一个数组或对象的字符串,适用于一个URL地址查询字符串或Ajax请求。 |
jQuery.post() | 使用一个HTTP POST请求从服务器加载数据。 |
.load() | 从服务器载入数据并且将返回的HTML代码并插入至匹配的元素中。 |
.serialize() | 将用作提交的表单元素的至编译成字符串。 |
.serializeArray() | 将用作提交的表单元素的值编译成拥有name和value对象组成的数组。 |
Ajax向服务器发送请求,使用XMLHttpRequest 对象的open()和send()方法:
Open(method,url,async)规定请求的类型、URL以及是否异步处理请求。
Send(string):将请求发送到服务器。
AJAX onrendystatechange 事件每当readyState改变时,就会触发onrendystatechange事件。readyState属性存有XMLHttpRequest的状态信息。下面是XMLHttpRequest对象的三个重要的属性:onrendystatechange :存储函数,每当readyState属性改变时,就会调用该函数。
readyState:存有XMLHttpRequest的状态。从0到4发生变化。
0:请求未初始化
1:服务器连接已建立
2:请求已接收
3:请求处理中
4: 请求已完成,且响应已就绪
status: 200: “OK” 404: 未找到页面
在 onreadystatechange 事件中,我们规定当服务器响应已做好被处理的准备时所执行的任务。
当 readyState 等于 4 且状态为 200 时,表示响应已就绪:
下面的代码图片是老师上课。
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
var txt = xhr.responseText;
console.log(txt);
}
}
document.getElementById("btnPost").addEventListener("click", function () {
var xhr;
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xhr = new XMLHttpRequest();
} else {
// code for IE6, IE5
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.open("POST", "/jQueryAjax/postPersonInfor");
var data = "name=" + document.getElementById("txtName").value + "&sex=" + document.getElementById("cboSex").value + "&address=" + document.getElementById("txtAddress").value;
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send(data);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
var txt = xhr.responseText;
console.log(txt);
}
}
});
document.getElementById("btnGet").addEventListener("click", function () {
var xhr;
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xhr = new XMLHttpRequest();
} else {
// code for IE6, IE5
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.open("get", "/jQueryAjax/getPersonInfor");
xhr.send();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
var data = xhr.responseText;//获取xhr的返回值
var person = JSON.parse(data);//将字符串解析为js对象
console.log(person);
document.getElementById("txtName").value = person.name;
document.getElementById("cboSex").value = person.sex;
document.getElementById("txtAddress").value = person.address;
}
}
});
同步与异步:
同步就是指一个进程在执行某个请求的时候,若该请求需要一段时候返回信息,那么这个进程将会一直等待下去,直到收到返回信息才继续执行下去;异步是指进程不需要一直等下去,而是继续执行下面的操作,不管其他进程的状态。当有消失返回时系统会通知进程进行处理,这样可以提高执行的效率。
下面的代码图片是老师上课。
/// XMLHttpRequest post异步
/// </summary>
/// <returns></returns>
public ActionResult postPersonInfor(FormCollection form)
{
string name = form["name"];
string sex = form["sex"];
string address = form["address"];
return Content(name + "&" + sex + "&" + address);//Content(string)返回字符串
}
#region
public ActionResult postPersonInfor1()
{
string name = Request.Form["name"];
string sex = Request.Form["sex"];
string address = Request.Form["address"];
return Content(name + "&" + sex + "&" + address);//Content(string)返回字符串
}
#endregion
/// <summary>
/// XMLHttpRequest get 异步
/// </summary>
/// <returns></returns>
public ActionResult getPersonInfor()
{
string str = "{ \"name\": \"张三\",\"sex\": \"男\",\"address\":\" 北京大学\"}";
return Content(str);//Content(string)返回字符串
}