智能社JS学习笔记（六）

AJAX基础

什么是AJAX？无刷新数据读取，可用于用户注册，在线聊天室等

——服务器

       创建自己本地服务器：可用node.js，使用 npm install -g http-server 全局安装后，在需要创建服务器目录的目录下打开命令行工具，如Git bash，输入http-server即可，默认端口为8080，默认地址 localhost:8080.

——使用AJAX

         基础：请求并显示静态TXT文件

        字符集编码：UTF-8，GB2312等，要求所有的文件都必须是统一的编码

        缓存：IE下需将浏览器关闭重启后才能刷新缓存

        工作原理：根据URL进行缓存，同一个地址读取一次

        阻止缓存：使URL一直更换

     

——动态数据：请求JS或json文件

       eval() 的使用：将字符串转换为JS可识别的东西，使用ajax请求出的数据均为字符串

——AJAX原理

       HTTP请求方法

       GET方式（通过网址传递）：把数据放入URL，基本格式为 名字=值&名字=值，容量小（浏览器URL长度有限），安全性差，有缓存；一般用于获取数据（如：浏览帖子）

       POST方式（不通过网址（http content））：容量大（2G），安全性好一点，没有缓存；一般用于上传数据（如：用户注册）

       较高的安全方式：https

AJAX中级

——变量与属性：全局变量属于window的一个属性

        在JS中，如果用没有定义的一个变量会报错，但如果使用没有定义的属性为undefined

——同步及异步

        同步：一件一件事来；异步：多件事一起做

——readyState 的状态

——编写AJAX

       步骤：1.创建AJAX对象；2.连接到服务器；3.发送请求（告诉服务器要哪个文件）；4. 接收返回值

function ajax(url,fnSucc,fnFaild){
    //创建AJAX对象
	var oAjax = new XMLHttpRequest();     //不兼容IE6

	// 连接服务器  open(方法，文件名，异步传输)
	oAjax.open('GET',url,true);   //后面加时间清空缓存

	//发送请求
	oAjax.send();

	//接收返回
	oAjax.onreadystatechange = function(){    //判断浏览器和服务器，进行到哪一步了
		     
		if(oAjax.readyState == 4){     //读取完成
           if(oAjax.status == 200){    //成功
              fnSucc(oAjax.responseText)  //获得从服务器发送回来的文本，成功
           }else {
           	  if(fnFaild){
           	  	fnFaild(oAjax.status)    //显示错误码，失败
           	  }    
           }        			
        }
    }	
} 

封装了一个名为AJAX的JS函数，方便以后调用，调用格式

window.onload = function(){
        	var oBtn = document.getElementById('btn1');

        	oBtn.onclick = function(){
        		ajax('a.txt?t=' + new Date().getTime(),function(str){
        			console.log(str)
        		})
        	}
        }