JQuery学习笔记（4）——ajax
程序员文章站
2022-06-23 14:46:22
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML） 原生 例子 点击按钮，访问服务器上的ajax_info.txt文件，获得txt文件的内容，并修改显示的文本 "参考链接菜鸟教程" XMLHttpRequest对象 ajax的核心 ......
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 或 post -
url：文件在服务器上的位置 -
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 文件