Css代码:
<p id="p1">修改文档文本内容</p>
<button id="btn">点击修改</button>
Js代码:
//给按钮绑定点击事件
$("#btn").click(function () {
1、创建XMLHttpRequest对象
var xhr;
if (window.XMLHttpRequest) {
// 兼容IE7以上的浏览器执行的代码
xhr = new XMLHttpRequest();
} else {
// 兼容IE6, IE5 浏览器执行的代码
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
2、向服务器发送请求,设置请求参数
//xhr.open(method,url,async);
//open()规定请求的类型,URL以及是否异步处理
//method:请求方式 GET/POST
//url:请求路径
//async:是否异步 默认:true(异步) false(同步)
xhr.open("POST", "/Jquery/changeTxt");
3、onreadystatechange
//onreadystatechange存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。
//readyState 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
xhr.onreadystatechange = function ()
{
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.responseText);
$("#p1").text(xhr.responseText);
}
}
//onload 请求成功时触发的事件
xhr.onload = function ()
{
//console.log(data.currentTarget.responseText);
console.log(xhr.responseText);
$("#p1").text(xhr.responseText);
}
- 发送请求
//send()将请求发送到服务器
xhr.send();
});
点击按钮会将p标签的内容更改成"/Jquery/changeTxt"这个路径的的内容。
//下面为控制器的代码
namespace JQuery.Controllers //路径1.找到JQuery
{
public class JqueryController : Controller
{
public ActionResult changeTxt() //路径2.找到JQuery后面加上changeTxt
{
//txt为我要修改的内容
var txt = "应用ajax修改标签内容";
return Json(txt,JsonRequestBehavior.AllowGet);
}
}
}