Ajax基础

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>
        
       

6、预习复习：http://www.w3school.com.cn/ajax/index.asp