JQuery学习笔记(4)——ajax
2023-02-18 16:39:08 时间
AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)
原生
例子
点击按钮,访问服务器上的ajax_info.txt文件,获得txt文件的内容,并修改显示的文本
<!DOCTYPE html>
<html>
<head>
<script>
var xmlhttp;//xmlhttp对象
function loadXMLDoc(url,cfunc){
//不同的浏览器,或得xmlhttp对象所调用的方法不同
if (window.XMLHttpRequest){
// IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}else{
// IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//回调函数
xmlhttp.onreadystatechange=cfunc;
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
function myFunction(){
//访问服务器上的/try/ajax/ajax_info.txt,并回调函数
loadXMLDoc("/try/ajax/ajax_info.txt",function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
});
}
</script>
</head>
<body>
<div id="myDiv"><h2>使用 AJAX 修改文本内容</h2></div>
<button type="button" onclick="myFunction()">修改内容</button>
</body>
</html>
XMLHttpRequest对象
ajax的核心对象,是服务器和客户端中间的桥梁,客户端向服务器发送请求和客户端获得服务器响应都是通过此对象的属性和方法来进行。
var xmlhttp;
//window.XMLHttpRequest不为空,就是true
if (window.XMLHttpRequest){
// IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}else{// IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
发送请求
- open(method,url,async) 连接服务器
method
:请求的类型;GET 或 POSTurl
:文件在服务器上的位置async
:true(异步)或 false(同步),推荐使用异步
- send(string) 发送请求
如果请求方式为get,send中的参数可以省略不写
onreadystatechange事件
xmlhttp对象有两个属性readyState
和status
当readyState
发生改变,就会触发onreadystatechange
事件
readyState
有以下几种状态
- 0: 请求未初始化
- 1: 服务器连接已建立
- 2: 请求已接收
- 3: 请求处理中
- 4: 请求已完成,且响应已就绪
status
有两种状态
- 200: "OK"
- 404: 未找到页面
服务器响应
使用 XMLHttpRequest 对象的 responseText
或 responseXML
属性可以获得来自服务器的响应数据
responseText
获得字符串形式的响应数据。responseXML
获得 XML 形式的响应数据。
JQuery实现ajax
1. $.ajax(url,[settings])
最基本的ajax方法
2. load(url,[data],[callback])
从服务器载入数据并且将返回的HTML代码并插入至匹配的元素中。
data
是传递给服务器的数据参数 ,可以是一个普通的对象或字符串
提供了一个回调函数complete(responseText, textStatus, XMLHttpRequest)
,当HTML代码并插入至匹配的元素中就会被调用
$('#mydiv').load("test.html");
//这里的first.html是当前同级目录的一个html文件
$('#mydiv').load('first.html',function (data,status) {
console.log(data);
console.log(status);//状态,成功为success,失败则为error
});
3. $.get(url,[data],[fn],[type])
使用一个HTTP GET请求从服务器加载数据
//这里实现的效果与上面的load一致
$.get("first.html",function(data){
$('#mydiv').html("test.html");
});
4. $.post(url,[data],[fn],[type])
使用一个HTTP POST请求从服务器加载数据,与上面get类似
5. $.getJSON(url,[data],[fn])
获得json数据并自动解析自动解析
$.getJSON("test.js", function(json){
console.log(json.users[3].name);
});
6. $.getScript(url,[callback])
使用一个HTTP GET请求从服务器加载并执行一个 JavaScript 文件
相关文章
- [MySQL] in 子查询出现DEPENDENT SUBQUERY问题
- [MySQL] 导入数据时防止出现乱码
- [MySQL] group by 聚合函数的原理和聚合限制原因SELECT list is not in GROUP BY clause and contains nonaggregated column
- [PHP] websocket协议的生成
- [MySQL]mysql的ANY_VALUE()函数 解决 ONLY_FULL_GROUP_BY 模式
- [PHP] 框架中.env文件的加载过程
- [PHP] PHP7已经删除了preg_replace的e修饰符
- [日常]解决Connection to `ssl://pecl.php.net:443' failed
- [日常]k8s的前世今生
- [日常]windows下kill进程工具taskkill
- [CSS] 纯CSS的前端图标icon库并且修改大小和颜色
- [PHP] php中的索引数组和数组顺序问题
- [PHP] RBAC权限与审批流的简单数据库构想
- [日常] 修改编辑word中的页眉页脚
- [PHP] socket客户端时的超时问题
- [nginx]配置nginx支持websocket解决返回400错误问题
- [nginx]配置nginx支持websocket解决返回400错误问题
- [PHP] php5.3之前-php5.3-php7垃圾回收机制的进化
- [PHP] include语句的注意事项
- [TCP] tcp连接SYN超时重传次数和超时时间