AJAX是什么？
AJAX是异步的JavaScript和XML（Asynchronous JavaScript And XML）。简单来说，就是使用XMLHttpRequest对象与服务器通信。它可以使用JSON，XML，HTML和text文本等格式发送和接收数据。AJAX最吸引人的就是它的“异步”特性。
AJAX有什么作用？
它可以在不重复刷新的页面的情况下与服务器通信，交换数据，或更新页面
AJAX不是一种新的编程语言，而是一种使用现有标准的新方法
异步：比如两件事情要做，先做第一件事，你不需要等待其他的结果，可以继续做第二件事件
同步：比如两件事要做，先做第一件，你要等待他出现结果，等结果出来之后，你才能继续做第二件事件
例如：
同步：
进程一 1ms
进程二 1ms
进程三 1ms
则需要3ms完成
异步：
进程一 1ms
进程二 1ms
进程三 1ms
则需要1ms完成
1.怎么发送http请求
需要创建XMLHttpRequest对象，XMLHttpRequest实现客户端与服务器的通信
需要考虑浏览器兼容问题
??????if (window.XMLHttpRequest) { // 新版浏览器 Chrome Safari 火狐 欧朋 IE7以上
?????????????xhr = new XMLHttpRequest();
???????} else { // 兼容IE6以下版本的浏览器
?????????????xhr = new ActiveXObject("Microsoft.XMLHTTP");
???????}
xhr.open(参数1,参数2,参数3);
参数1是请求方式(method):GET或POST
参数2是请求地址(url)
参数3是异步或同步(async):true是支持异步,false是不支持异步
发送请求
xhr.send();
一个简单的get请求
xhr.open(“GET”,“/”,true);
xhr.send();
一个简单的post请求
xhr.open(“POST”,“/”,true);
xhr.send();
- 处理响应数据
通过onreadystatechange函数进行处理
ReadyState:
0(未初始化) or (请求还未初始化)
1(正在加载) or (已建立服务器链接)
2(加载成功) or(请求已接受)
3(交互) or(正在处理请求)
4(完成) or (请求已完成并且响应已准备好)
Status:
200 ?响应成功
404 访问失败
500 服务器错误
responseText 处理数据 -- 服务器以文本字符的形式返回
responseXML 以XMLDocument 对象方式返回，之后就可以JavaScript来处理
xhr.onreadystatechange = function () {
?????if (xhr.readyState == 4 && xhr.status == 200) {
??????????var str = xhr.responseText;
??????}
}
案例：
这个案例需要使用bootstrap插件和jQuery插件完成
Html：
<div?class="container mt-5">
@*οnsubmit="return false" 阻止表单自动提交*@
<form?id="frm"?action="/Main/getData"?method="get"?onsubmit="return?false">
<div?class="form-group form-row">
<label?class="form-check-label col-3 text-center">姓名:</label>
<input?id="txtName"?class="col-9 form-control"?type="text"?name="name"?value=""?/>
</div>
<div?class="form-group form-row">
<label?class="form-check-label col-3 text-center">性别:</label>
<select?name="sex"?class="form-control col-9"?id="sexBox">
<option?value="0">--请选择--</option>
<option?value="男">男</option>
<option?value="女">女</option>
</select>
</div>
<div?class="form-group form-row">
<label?class="form-check-label col-3 text-center">地址:</label>
<textarea?id="txtAdd"?class="col-9 form-control"?name="address"></textarea>
</div>
<div?class="form-group form-row">
<button?type="button"?id="btnGetData"?class="btn btn-outline-primary offset-3 mr-2">从控制器获取数据</button>
<button?type="button"?class="btn btn-outline-success mr-2"?onclick="postData() >POST提交</button>
????</div>
????</form>
</div>
控制器里的代码;
namespace?AjaxCourse.Controllers
{
????public?class?AjaxController?: Controller
????{
????????// GET: Ajax
????????public?ActionResult Index()
????????{
????????????return?View();
????????}
???????
????????///?<summary>
????????///?从控制器返回数据给视图
????????///?</summary>
????????///?<returns></returns>
????????public?ActionResult GetData()
????????{
????????????string?str = "{\"name\":\"张三\",\"sex\":\"男\",\"address\":\"广州市南沙区\"}";
????????????return?Content(str);
????????}
????????///?<summary>
????????///?通过形参的方式来接收视图传递过来的数据
????????///?</summary>
????????///?<param name="name"></param>
????????///?<param name="sex"></param>
????????///?<param name="address"></param>
????????///?<returns></returns>
????????public?ActionResult RecieveData(string?name,string?sex,string?address)
????????{
????????????// 拼接字符串
????????????string?str = "姓名:"?+ name + ",性别:"?+ sex + ",地址:"?+ address;
????????????//返回给视图
????????????return?Content(str);
????????}
}
浏览器：
当鼠标点击“从控制器获取数据”按钮，则上面文本框出现相应的信息
效果：
?
?
AJAX:
?
上面的发送请求里的请求方式是“GET”，请求地址是“/Ajax/GetData”(就是从控制器里获取数据 Ajax是控制器里?// GET: Ajax，GetData是控制器里自定义的函数名)
当输入内容到文本框里，然后点击“POST按钮”，提交数据，控制台输出相应的数据
例如：
?
AJAX:
?
上面的发送请求里的请求方式是“POST”，请求地址是“/Ajax/RecieveData”(就是从控制器里获取数据 Ajax是控制器里?// GET: Ajax，RecieveData是控制器里自定义的函数名)