学习笔记--Ajax

什么是Ajax
     无刷新数据读取
     用户注册、在线聊天室
           异步、同步
使用Ajax
     基础：请求并显示静态TXT文件
           字符集编码
           缓存、阻止缓存
     动态数据：请求JS（或json）文件（ajax得到的是字符串）
           eval的使用（把一个语句内容解析为JS可以识别的）
           DOM创建元素
     局部刷新：请求并显示部分网页文件
Ajax原理
      HTTP请求方法
            GET----用于获取数据（如：浏览帖子）
            POST----用于上传数据（如：用户注册）
            GET、POST的区别
                  get:通过网址传递、网址长度有限 容量小（上传图片等不行，不适合传递大数据）、安全性差、有缓存
                  post:通过http Content(不通过网址)、可以到达2G、没有缓存（每一次都提取新的数据）
                  get是在url里传数据：安全性、容量（？名字=值&名字=值）
                  缓存

HTTPS和HTTP的区别一、https协议需要到ca申请证书，一般免费证书很少，需要交费。 二、http是超文本传输协议，信息是明文传输，https 则是具有安全性的ssl加密传输协议。 三、http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。 四、http的连接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。

编写Ajax
1.创建Ajax对象
      ActiveXObject("Microsoft.XMLHTTP")
      XMLHttpRequest()
2.连接服务器
      open(方法，文件名，异步传输)
            同步和异步(多件事可以一起来做，请求的同时可以执行页面其他操作)
3.发送请求
      send()
4.接收返回值
     请求状态监控
            onreadystatechange事件
                   readyState属性：请求状态
                         0（未初始化）还没有调用open()方法
                         1（载入）已调用send()方法，正在发送请求
                         2（载入完成）send()方法完成，已收到全部响应内容(可能加密或压缩过，自己做解码，解压)
                         3（解析）正在解析响应内容
                         4（完成）响应内容解析完成，可以在客户端调用了
                  status属性：请求结果
          responseText
数据类型
      什么叫数据类型--英语、中文
      XML（同等数据量比Json大很多）、Json
字符集
      所有文件字符集相同 （全统一为utf-8）

1. function ajax(url,fnSucc,fnFaild)
   
2.                 {
   
3.                         var oBtn=document.getElementById("btn1");
   
4.                         oBtn.οnclick=function()
   
5.                         {
   
6.                                 //1.创建Ajax对象 
   
7.                                 //非IE6
   
8.                                 var oAjax;
   
9.                                 if(window.XMLHttpRequest)//不会报错，只会是undefined
   
10.                                         {oAjax=new XMLHttpRequest();}
    
11.                                 else
    
12.                                 //iE6 IE5
    
13.                                         {oAjax=new ActiveXObject("Microsoft.XMLHTTP");}
    
14.                                 //alert(oAjax);
    
15.                                 //2.连接服务器
    
16.                                 //open(方法,文件名,异步传输)
    
17.                                 oAjax.open("get",url+"?t="+new Date().getTime(),true);//制止缓存
    
18.                                 //3.发送请求
    
19.                                 oAjax.send();
    
20.                                 //4.接收返回值  和服务器通讯的时候此事件发生
    
21.                                 oAjax.onreadystatechange=function()
    
22.                                 {
    
23.                                         //oAjax.readyState //浏览器和服务器，进行到哪一步了
    
24.                                         if(oAjax.readyState==4)//读取完成（可能文件不存在）
    
25.                                         {
    
26.                                                 if(oAjax.status==200)//成功
    
27.                                                 {
    
28.                                                         fnSucc(oAjax.responseText);
    
29.                                                         //alert("成功"+oAjax.responseText);
    
30.                                                 }
    
31.                                                 else
    
32.                                                 {
    
33.                                                         if(fnFaild)//fnFaild传进来时
    
34.                                                         {
    
35.                                                                 fnFaild(oAjax.status);
    
36.                                                         }
    
37.                                                         //alert("失败:"+oAjax.status);//status为404
    
38.                                                 }
    
39.                                         }
    
40.                                 }
    
41.                         }
    
42.                 }

复制代码

1. <script>
   
2.                 window.οnlοad=function(){
   
3.                 var oBtn=document.getElementById("btn1");
   
4.                 oBtn.οnclick=function()
   
5.                 {
   
6.                         ajax("a.txt",function(str){alert(str)})
   
7.                 }
   
8.                 }
   
9.         </script

复制代码

 

转载： http://www.w3cfuns.com/blog-5442494-5398026.html