Ajax的请求、事件、其他

开发工具与关键技术：Visual Studio / 向服务器发送请求、onreadystatechange事件
作者：郑名方
撰写时间：2019年4月 25日

Ajax的操作是jQuery库技持完成。下面表格的函数分为三个类型：请求、事件、还有其他。请求分别是：.ajax、load、.ajax、load、.ajax、load、.get、.getJSON、.getJSON、.getJSON、.getScript、post。事件分别是:ajaxComplete、ajaxError、ajaxSend、ajaxStart、ajaxStop、ajaxSuccess。其他分别是:post。事件分别是:ajaxComplete、ajaxError、ajaxSend、ajaxStart、ajaxStop、ajaxSuccess。其他分别是:post。事件分别是:ajaxComplete、ajaxError、ajaxSend、ajaxStart、ajaxStop、ajaxSuccess。其他分别是:. ajaxPrefilter、$. ajaxSetup、serialize、serializeArray。

Ajax向服务器发送请求，使用XMLHttpRequest 对象的open()和send()方法：
Open(method,url,async)规定请求的类型、URL以及是否异步处理请求。
Send(string):将请求发送到服务器。

AJAX onrendystatechange 事件每当readyState改变时，就会触发onrendystatechange 20000 事件。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)返回字符串
}