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, Safarixmlhttp=new XMLHttpRequest();}else{// code for IE6, IE5xmlhttp=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>
扫一扫
351
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
