ajax异步 —— javascript
2024-09-01 23:58:40
目录
ajax是什么
作用：不必重新加载整个页面，更新部分页面内容。
大概使用过程：通过后台提供的数据接口，ajax获取数据，动态修改视图层。
原生ajax
将ajax请求封装成一个函数，可以传参，选择请求类型，以及成功后的回调函数。
/*
url: 请求地址,
data: 请求参数,
method: 请求类型,
success: 请求成功后的回调函数
*/
function ajax_method(url, data, method, success){
var ajax;
if (window.XMLHttpRequest) {
// IE7+, Firefox, Chrome, Opera, Safari
ajax = new new XMLHttpRequest();
}else {
// IE6, IE5
ajax = new ActiveXObject("Microsoft.XMLHTTP");
} if (method == "get") {
if (data) {
// 有数据
url += ("?"+data);
}
ajax.open(method, url);
ajax.send();
}else{
// post
ajax.open(method, url);
// post请求要加上的请求头
ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
if (data) {
ajax.send(data);
}else{
ajax.send();
}
} ajax.onreadystatechange = function(){
console.log("可以1");
// 0: 请求未初始化
// 1: 服务器连接已建立
// 2: 请求已接收
// 3: 请求处理中
// 4: 请求已完成，且响应已就绪 // 200: 请求处理成功
// 404: 未找到页面
if (ajax.readyState == 4 && ajax.status == 200) {
console.log("请求成功");
success(ajax.responseText);
}else{
console.log("请求失败");
}
}
}
调用：
ajax_method("./test.php", {"param1": "val1"}, "post", function(data){
console("请求拿到的数据:",data);
// 之后将拿到的数据渲染视图层
})
jquery ajax
使用jqury，可以便捷的发送ajax请求，需要引入juery.js
$.ajax({
url: "./test.php",
method: "post",
dataType: "json", // 服务器返回数据类型
data: {
"param1": "val1", // 请求参数
},
success: function(data){
console("请求拿到的数据:",data);
// 之后将拿到的数据渲染视图层
},
error: function(){
alert('请求失败');
}
});
ajax跨域
为什么有跨域问题？
“同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。”
同源：相同协议，域名，端口号。
所以当ajax请求的地址，存在协议，域名，端口号不同时，则存在跨域问题，浏览器会报错。
解决跨域的方法，可以看下一篇文章。
最新文章
- C#/VB.NET 向PowerPoint文档插入视频
- Android常用布局
- 与PostgreSQL相关的工具
- Altium Designer 使用小结
- iOS堆栈－内存－代码在据算机中的运行
- [虚拟化/云][全栈demo] 为qemu增加一个PCI的watchdog外设（三）
- 编程算法 - 有序双循环链表的插入 代码(C)
- babel如此简单
- 初学Python（一）——数据类型
- Socket通信中AF_INET 和 AF_UNIX域的区别
- 手工搭建基于ABP的框架(2) - 访问数据库
- js遍历 子节点 子元素
- 解决不同操作系统下git换行符一致性问题
- spark下使用submit提交任务后报jar包已存在错误
- 【归纳】正则表达式及Python中的正则库
- python网络爬虫入门(一)
- [转]OpenVPN官网的HOWTO
- 第三方包源码maven 下载
- python --- 07 补充( join 删除和添加 fromkeys ) 深浅拷贝
- Remove Element leetcode java