ajax----发送异步请求的步骤
1)获取(创建)Ajax对象:获取XMLHttpRequest对象
2)创建请求:调用xhr的open方法
3)在发送请求之前需要设置回调函数:绑定指定xhr的onreadystatechange事件
4)调用send()方法发送请求
//创建XMLHttpReuquest 对象
function createXhr() {
var xhr = null;
//浏览器判断
if (window.XMLHttpRequest) {
//可以直接new出来对象的说明是IE7、8、9 Chrome、FireFox等浏览器
xhr = new XMLHttpRequest();
} else {
//这样的就是IE 5.5、 IE 6等低版本的浏览器
xhr = new ActiveXObject("Microsoft.XMLHttp");
}
return xhr;
}
//创建异步请求方法get
function getServerText() {
//获取xhr
var xhr = createXhr();
//创建请求
xhr.open("get", "server.php", "true");//true表示异步请求
//设置回调函数
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
//服务器已经正确处理请求且正确响应数据到客户端
var resText = xhr.responseText;//返回服务器响应文本
//获取服务器响应给客户端的文本即server.php中的文本内容
document.getElementById("showText").innerHTML = resText;
}
}
//发送请求
xhr.send(null);//请求方式为get,所以请求体必须是null
}
实例:模拟服务器发送请求
ajax提交数据(get方法):
$(document),ready(function(){
$("#txtName").blur(function(){
1)获取xhr
var xhr =createxhr();
2)创建请求
var name = $("#txtName").val();
var url = "checkname.jsp?name="+name;
xhr.open("get",url,true);
3)设置回调函数
xhr.onreadystatechange = function(){
if(xhr.readyState==4 && xhr.status==200){
//服务器已经正确处理请求且正确响应数据到客户端
var resText= xhr.responseText;//返回服务器响应文 本
$("#txtNameTip").html(resText);//获取响应回来的 数据
}
}
4)发送请求
xhr.send (null);//get发送请求的方法
});
});
//创建异步请求方法post
$(document),ready(function(){
$("#txtName").blur(function(){
1)获取xhr
var xhr =createxhr();
2)创建请求
var name = $("#txtName").val();
var url = "checkname.jsp";
xhr.open("post",url,true);
xhr.setRequestHeader("Content-Type","application/x-www-
form-urlencoded");
3)设置回调函数
xhr.onreadystatechange = function(){
if(xhr.readyState==4 && xhr.status==200){ //注意顺序
//服务器已经正确处理请求且正确响应数据到客户端
var resText= xhr.responseText;//返回服务器响应文
本
$("#txtNameTip").html(resText);//获取响应回来的
数据
}
}
4)发送请求
xhr.send ("name="+name);//Post方法发送方法
注意:必须在创建请求之后,发送请求之前使用setRequestHeader
()显示更改Content-Type消息头的值为
application/x-www-form-urlencoded ,否则获取不到传递过去的
数据
})
});
本文来自博客园,作者:小虾米吖~,转载请注明原文链接:https://www.cnblogs.com/LindaBlog/p/9274969.html
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」