AJAX学习笔记(1)

发表于 | 分类于 ， ， | 阅读次数:

AJAX原理和封装

Ajax

Ajax: Asynchronous JavaScript and XML(异步的JavaScript和XML)

- 节省用户操作时间，提高用户体验，减少数据请求
- 传输获取数据

请求状态监控

  • onreadystatechange
    • readyState属性：请求状态
      • 0 (初始化) 还没有调用open()方法
      • 1 (载入) 已调用send()方法，正在发送请求
      • 2 (载入完成) send()方法完成，已收到全部响应内容
      • 3 (解析) 正在解析响应内容
      • 4 (完成) 响应内容解析完成，可以在客户端调用了
    • status属性：服务器(请求资源)的状态
    • 返回的内容
      • responseText：返回以文本形式存放的内容
      • responseXML：返回XML形式的内容
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<input type="button" value="按钮" id="btn">
<script>
var oBtn = document.getElementById('btn');

oBtn.onclick = function(){

  //类比浏览一个网页的行为
  //打开浏览器
  /*
    1.创建一个ajax对象
        IE6以下 new ActiveXObject('Microsoft.XMLHTTP') //内置插件
   */
  //var xhr = new XMLHttpRequest(); //会有兼容问题，需要加个判断

  var xhr = null;

  /*if(window.XMLHttpRequest){ //注意不要写成XMLHttpRequest，这个方法在IE6下不存在仍会报错
    xhr = new XMLHttpRequest();
  }else{
    xhr = new ActiveXObject('Microsoft.XMLHTTP');
  }*/

  try{
    // 代码尝试执行块中的内容，如果有错误，则会执行catch{},并且传入错误信息参数
    // throw new Error(); //手动抛错,也会执行catch{}

    xhr = new XMLHttpRequest();
  }catch(e){
    // alert(e);
    xhr = new ActiveXObject('Microsoft.XMLHTTP');
  }


  //在地址栏输入地址
  /*
    open方法
      参数（和表单有些像）
          1.打开方式
              get
              post
          2.地址
              发送请求的地址
          3.是否异步
              异步：非阻塞模式  前面的代码不会影响后面代码的执行  // 参数值为true
              同步：阻塞模式 前面的代码会影响后面代码的执行 // 参数值为false
   */
  /*
    get方式
   */
  // 缓存 在url?后面接连接一个随机数，时间戳 (这个地方为了避免与传进来的参数名冲突，时间戳不赋给变量)（get是用来获取数据的，获取数据会被缓存）
  // 传递中文时乱码问题 编码encodeURI
  xhr.open('get', '1.get.php?username=' + encodeURI('名字') + '&age=3&' + new Date().getTime(), true); // 异步
  //提交 发送请求
  xhr.send();

  /*
    post方式
   */
  xhr.open('post', '1.post.php', true);
  // post方式，数据放在send()里面作为参数传递
  xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded'); // 申明发送的数据类型，必须
  // post没有缓存问题（post是用来提交数据的，提交数据不会被缓存 web机制）
  // 请求头指定了编码方式，无需再手动编码
  xhr.send('username=' + encodeURI('名字') + '&age=3&' + new Date().getTime());


  //等待服务器返回内容
  /*
    readyState : ajax工作状态
    responseText : ajax请求返回的内容被存放到这个属性下面
    onreadystatechange : 当readyState改变的时候触发
    status : 服务器状态，http状态码
   */
  xhr.onreadystatechange = function(){
    if(xhr.readyState == 4){
      if(xhr.status == 200){
        alert(xhr.responseText);
        alert(typeof xhr.responseText); // string
      }else{
        alert('出错了，Err:' + xhr.status);
      }
    }
  }
}
</script>

表单

表单：数据的提交
action：数据提交的地址，默认是当前页面
method：数据提交的方式，默认是get方式
1.get
把数据名称和数据值用=连接，如果有多个的话，那么会把多个数据组合用&进行连接，然后把数据放到url?后面传到指定页面
url长度限制的原因，不要通过get方式传递过多的数据
通过url传递，可能会被记录下来（历史记录），暴露在外，可能会对用户隐私造成泄露
传递的值是字符串类型，不能传递其他的数据类型
2.post
理论上无限制（实际上限制还是有的，后端php.ini中设置post_max_size,默认值post_max_size=8M，有些服务器会不一样，自身理论上无限制）
通过请求头发送，不会被缓存
可以传递很多种类型，比如文本格式、二进制
enctype：提交的数据格式，默认是application/x-www-form-urlencoded

$_REQUEST可以获取get方式传过来的数据也可以获取post方式传过来的数据
如果使用$_REQUEST获取数据则用get方式或post方式传递都可以
但如果指明了用get方式或post方式获取数据，传递方式需要对应起来

1
2
3
4
5
6
7
8
9
10
11
12
<form action="1.get.php">
  <input type="text" name="username">
  <input type="submit" value="提交">
</form>
```        

JSON对象
IE7及以下浏览器不支持
如果浏览器当前的语言不支持json和字符串互转，可以到 [json.org](json.org) 下载对应的语言包
引入[json2.js](https://github.com/douglascrockford/JSON-js/blob/master/json2.js)以支持IE7及以下浏览器不支持

stringify：把一个对象转换成对应的字符串

var arr = [1, 2, 3];
alert(JSON.stringify(arr)); // [1, 2, 3]
alert(typeof JSON.stringify(arr)); // string

var j = {left:100};
alert(JSON.stringify(arr)); // {“left”:100}
JSON的key值必须是双引号"包裹的

1
parse: 把字符串转成对应的对象

var s1 = ‘[100,200,300]’;
var a1 = JSON.parse(s1);
alert(a1); // 100,200,300

var s2 = ‘{“left”:100}’;
var a2 = JSON.parse(s2);
alert(a2.left); // 100

var s3 = “{left:100}”;
var a2 = JSON.parse(s2);
alert(a2.left); // 报错，JSON的key值必须是双引号"包裹的
`