JavaScript：ajax基础
作者：互联网
1.什么是ajax
Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。一句话，ajax可以让js和服务器实现数据交互，不需要刷新网页。
2.使用wamp搭建本地服务器，利用localhost/***.html访问放置在wamp安装目录下www目录的页面
3.提供如下ajax函数，格式为js
function ajax(url, fnSucc, fnFaild)
{
//1.创建Ajax对象
if(window.XMLHttpRequest)
{
var oAjax=new XMLHttpRequest();
}
else
{
var oAjax=new ActiveXObject("Microsoft.XMLHTTP");
}
//2.连接服务器（打开和服务器的连接）
oAjax.open('GET', url, true);
//3.发送
oAjax.send();
//4.接收
oAjax.onreadystatechange=function ()
{
if(oAjax.readyState==4)
{
if(oAjax.status==200)
{
//alert('成功了：'+oAjax.responseText);
fnSucc(oAjax.responseText);
}
else
{
//alert('失败了');
if(fnFaild)
{
fnFaild();
}
}
}
};
}
4.通过ajax函数读取外部文件aaa.txt中的内容。文件中的内容aaaaaa
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>read ajax</title>
<script src="ajax.js"></script>
<script>
window.onload = function(){
var oBtn = document.getElementById('btn1');
oBtn.onclick = function(){
//+date是为了去缓存
ajax("aaa.txt?t="+new Date().getTime(),function(str){
alert(str);
},function(){
alert('failed');
});
};
};
</script>
</head>
<body>
<input id="btn1" type="button" value="读取"/>
</body>
</html>
5.读取arr.txt文件中的数组，文件内容[1,2,3,4,4,5,6,7]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>read ajax</title>
<script src="ajax.js"></script>
<script>
window.onload = function(){
var oBtn = document.getElementById('btn1');
oBtn.onclick = function(){
//+date是为了去缓存
//虽然读了个数组，但其实是字符串
ajax("arr.txt?t="+new Date().getTime(),function(str){
alert(eval(str));
},function(){
alert('failed');
});
};
};
</script>
</head>
<body>
<input id="btn1" type="button" value="读取"/>
</body>
</html>
6.读取json文件，文件内容：[{user: 'blue', pass: '123456'},{user: 'zs', pass: '654321'},{user: 'ls', pass: '789456'},{user: 'ww', pass: '7777'}]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>read ajax</title>
<script src="ajax.js"></script>
<script>
window.onload = function(){
var oBtn = document.getElementById('btn1');
var oUl = document.getElementById('ul1');
oBtn.onclick = function(){
//+date是为了去缓存
//虽然读了个数组，但其实是字符串
//用eval可以从字符串返回数字
ajax("json.txt?t="+new Date().getTime(),function(str){
var arr = eval(str);
for (var i = arr.length - 1; i >= 0; i--) {
var oLi = document.createElement('li');
oLi.innerHTML = '用户名：<strong>'+arr[i].user+'</strong>密码：<span>'+arr[i].pass+'</span>';
oUl.appendChild(oLi);
}
},function(){
alert('failed');
});
};
};
</script>
</head>
<body>
<input id="btn1" type="button" value="读取"/>
<ul id="ul1"></ul>
</body>
</html>
7.post和get
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>read ajax</title>
<script src="ajax.js"></script>
<script>
window.onload = function(){
};
</script>
</head>
<!-- get通过网址传递，容量小，网址可能非常长，从而无法访问-->
<!-- post不通过网址传递，容量大，没有长度问题 -->
<!-- get不安全，网址栏以及历史记录都看得见提交的内容 -->
<!-- get方式有缓存，post没有缓存 -->
<!-- get适合用来获取数据，post适合用来传递数据 -->
<form action="http://www.zhinengshe.com/" method="post">
用户名：<input type="text" name="username"/><br>
密码：<input type="password" name="password"><br>
<input type="submit">
</form>
</body>
</html>
注意事项：
1.wamp得打开
2.文件等必须放在www目录下
3.访问时必须通过地址访问，注意自己的端口号，一般默认是8080，我的是自己修改的
陈学俊
发布了128 篇原创文章 · 获赞 7 · 访问量 1万+
私信
关注
标签：function,网页,JavaScript,基础,alert,ajax,var,oAjax 来源： https://blog.csdn.net/qq_36880027/article/details/104518361