Ajax基础
1、什么是服务器
- 网页浏览过程分析
- 如何配置自己的服务器程序(wamp)(已配置,lamp WampServer软件 )
2、什么是Ajax (AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。)
- 无刷新数据读取
- 用途:用户登陆、股票基金网
- 异步、同步
3、使用Ajax
- 基础:请求并显示静态TXT文件
- 字符集编码 (UTF-8 和 gb2312)
- 缓存、阻止缓存(阻止缓存的意思是随时让缓存改变) (url等于'aaa.txt?t='+new Date().getTime() 就是让url随时改变,缓存中的文件随时变就能达到了==阻止缓存 )
- 动态数据:请求JS(或json)文件
- eval的使用(用这个得到的是数组,不用这个得到的字符串) (用于数组和json )
- DOM创建元素 (document.crateElement)
- 局部刷新:请求并显示部分网页文件
4、HTTP请求方法
- GET——用于获取数据(如:浏览帖子)
- POST——用于上传数据(如:用户注册)
- GET、POST的区别
- get是在url里传数据:安全性、容量
- 缓存
- post较安全,容量较大
------------------------------------------------------------------------------------------------------------------
1、什么是服务器:能提供一定服务的特殊电脑。ftp、svn、web
- 网页浏览过程分析:在浏览器发出请求 》》 到服务器读取 》》 返回数据 》》 下载到本地浏览器看到(所以第二次浏览的时间比第二次快)
- 如何配置自己的服务器程序(wamp)
安装一个wamp集成环境,
因为Ajax是读取服务器上面的信息的(所以必须安装服务器),所以我们接下来的页面需要保存到www目录下:比如我创建一个文件aa.html放到该目录下。我可以通过浏览器输入下面的信息找到这个文件:
- http://loclhost/aa.html
- 127.0.0.1/aa.html
2、什么是Ajax:AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。
- 无刷新数据读取
- 用户登陆、股票基金网
- 异步、同步
AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。AJAX 不是新的编程语言,而是一种使用现有标准的新方法。
AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下。有很多使用 AJAX 的应用程序案例:新浪微博、Google 地图、开心网等等。
用途如下:
百度搜索提示:只要打关键字,就有相关提示。
登陆:
(输入错误会有提示)
股票信息:(曲线随时动)
传统的开发模式和ajax开发模式比较:画图讲解
传统的开发模式:用户的每一次操作都触发一次返回服务器的HTTP请求,服务器做出处理后,返回一个html页面给用户。(会把整个页面返回来)
ajax开发模式:页面将用户的操作通过ajax引擎与服务器进行通信,将返回的结果给ajax引擎,然后ajax将数据插入指定位置。
3、ajax基础:先会用,再自己编写
XMLHttpRequest 对象
所有现代浏览器均支持 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject)。
XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
创建 XMLHttpRequest 对象
所有现代浏览器(IE7+、Firefox、Chrome、Safari 以及 Opera)均内建 XMLHttpRequest 对象。
创建 XMLHttpRequest 对象的语法:
variable=new XMLHttpRequest();
老版本的 Internet Explorer (IE5 和 IE6)使用 ActiveX 对象:
variable=new ActiveXObject("Microsoft.XMLHTTP");
兼容性写法:
为了应对所有的现代浏览器,包括 IE5 和 IE6,请检查浏览器是否支持 XMLHttpRequest 对象。如果支持,则创建 XMLHttpRequest 对象。如果不支持,则创建 ActiveXObject :
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
4、使用ajax:先会用,再自己编写
- 基础:请求并显示静态TXT文件
- 字符集编码
- 缓存、阻止缓存
- 动态数据:请求JS(或json)文件
- eval的使用
- DOM创建元素
- 局部刷新:请求并显示部分网页文件
为了更好的理解ajax。我们先学会怎么使用,再编写自己的ajax。准备下面的文件放到服务器里面:
- ajax.js文件(函数已经写好)
- 一个文件a.txt (随便写些东西)
- 状态码:
- 0: 请求未初始化
- 1: 服务器连接已建立
- 2: 请求已接收
- 3: 请求处理中
- 4: 请求已完成,且响应已就绪
- 200 :表示找到页面
- 404 : 表示没有找到该页面
封装好的ajax js文件代码如下:
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();
}
}
}
};
}
ajax(url, fnSucc, fnFaild)函数参数介绍:
- url:读取文件的路径,可以写相对路径或绝对路径(服务器上面的文件名都不能用中文命名)
- fnSucc:成功返回信息
- fnFaild:失败返回信息
可以随便写东西:a.txt
这是文件内容
我们再写一个文件读取
a.txt
的内容:去看看ajax.js里面的函数参数,大概理解一下
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="ajax.js"></script>
<script>
window.onload=function ()
{
var oBtn=document.getElementById('btn1');
oBtn.onclick=function ()
{
ajax('aaa.txt', function (str){
alert(str); //成功时的信息
}, function (){
alert('失败'); //失败的信息
});
};
};
</script>
</head>
<body>
<input id="btn1" type="button" value="读取" />
</body>
</html>
如果
a.txt里面有中文,会出问题吗?记得要保证文件编码统一:utf-8
阻止缓存方法:缓存是根据URL来存储的。只要url在变,就可以了。在路径那里加上get数据。
getTime()是毫秒数
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="ajax.js"></script>
<script>
window.onload=function ()
{
var oBtn=document.getElementById('btn1');
oBtn.onclick=function ()
{
ajax('aaa.txt?t='+new Date().getTime(), function (str){
alert(str);
}, function (){
alert('失败');
});
};
};
</script>
</head>
<body>
<input id="btn1" type="button" value="读取" />
</body>
</html>
上面是获取txt里面内容的,如果想获取数组和json的内容。方法如下:ajax读取的到的都是字符串,要用函数even()
[1,2,3,4,5,6,7]
读取数组:
<script src = "ajax.js" ></script><script>
window.onload=function ()
{
var oBtn=document.getElementById('btn1');
oBtn.onclick=function ()
{
ajax('arr.txt?t='+new Date().getTime(), function (str){
var arr=eval(str);
alert(arr[3]);
}, function (){
alert('失败');
});
};
};
</script>
读取json:
[{a: 5, b: 7}, {a: 8, b: 12}]
<script src="ajax.js"></script>
<script>
window.onload=function ()
{
var oBtn=document.getElementById('btn1');
oBtn.onclick=function ()
{
ajax('arr2.txt?t='+new Date().getTime(), function (str){
var arr=eval(str);
alert(arr[0].a);
}, function (){
alert('失败');
});
};
};
</script>
读取的json放大ul里面:(动态创建)
[{user: 'blue', pass: '123456'},{user: '张三', pass: '654321'},{user: '李四', pass: '789456'},{user: '王五', pass: '7777'}]
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="ajax.js"></script>
<script>
window.onload=function ()
{
var oBtn=document.getElementById('btn1');
var oUl=document.getElementById('ul1');
oBtn.onclick=function ()
{
ajax('data.txt?t='+new Date().getTime(), function (str){
var arr=eval(str);
for(var i=0;i<arr.length;i++)
{
var oLi=document.createElement('li');
oLi.innerHTML='用户名:<strong>'+arr[i].user+'</strong>密码:<span>'+arr[i].pass+'</span>';
oUl.appendChild(oLi);
}
}, function (){
alert('失败');
});
};
};
</script>
</head>
<body>
<input id="btn1" type="button" value="读取" />
<ul id="ul1">
</ul>
</body>
</html>
5、HTTP请求方法
- GET——用于获取数据(如:浏览帖子):不安全,放到url里面传递信息(会把输入的信息显示在url中),通过网址传递,容易出错,因为有大小限制:4-10k,有缓存
- POST——用于上传数据(如:用户注册):稍微安全一些,不通过网址url,可以传大文件,2G,没有缓存
- GET、POST的区别
- get是在url里传数据:安全性、容量
- 缓存
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<form action="http://www.baidu.com/" method="post">
用户名:<input type="text" name="username" /><br>
密码:<input type="password" name="password" /><br>
<input type="submit" />
</form>
</body>
</html>