AJAX大合集

2017-10-30 本文已影响0人 8d2855a6c5d0

1.get请求

    var name = document.getElementById('username').value;
    //转码
    name = encodeURIComponent(name);
    //创建ajax对象
    var XHR = new XMLHttpRequest();
    
    XHR.open('get','text.php?name=' + name);

    XHR.onreadystatechange = function () {
        if (XHR.readyState == 4 && XHR.status == 200) {
            //do something
        }  
    };

    XHR.send();

state和status的区别

来个形象的比方，你体重多少公斤，属于status，但说你体重属于偏瘦、正常还是偏胖，那就是state.

2.POST 请求

1、必须通过send()发送数据
2、必须设置setRequestHeader('Content-Type','application/x-www-form-urlencoded');将传递的值的参数转成XML格式
3、post提交可以直接提交中文
4、post请求中的字符也会和URL中的&、=字符相混淆，所以建议也要使用encodeURIComponent()编码

var name = document.getElementById('username').value;
    //转码
    name = encodeURIComponent(name);
    //创建ajax对象
    var XHR = new XMLHttpRequest();
    
    XHR.open('post','text.php?');

    XHR.onreadystatechange = function () {
        if (XHR.readyState == 4 && XHR.status == 200) {
            //do something
        }  
    };
    XHR.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    XHR.send('name='+name);

readyState
    0 初始状态   xhr对象刚创建完
    1 连接       连接到服务器
    2 发送请求   刚刚send完
    3 接收完成   响应头接收完成
    4 接收完成   响应体接收完成

3.POST和GET的区别

（1）最直观的区别就是GET把参数包含在URL中，POST通过request body传递参数。
（2）GET在浏览器回退时是无害的，而POST会再次提交请求。
（3）GET请求会被浏览器主动cache，而POST不会，除非手动设置。。
（4）字数限制：当发送数据时，GET 方法向 URL 添加数据；URL 的长度是受限制的（URL 的最大长度是 2048 个字符）。POST的传输字数无限制。
（5）对参数的数据类型，GET只接受ASCII字符，而POST没有限制。
（6）GET适用于数据的查询和获取，POST适用于数据的增加删除和修改。
99%的人都理解错了HTTP中GET与POST的区别

4.AJAX缓存

浏览器第一次访问服务器的时候，需要从服务器加载很多的静态资源（CSS、JS、Image），并将这些资源文件缓存在浏览器中，当再次访问页面的时候，如果有相同的资源文件就直接到缓存中去加载，这样就会降低服务器的负载和带宽，加快用户访问。
但是这样也会出现bug，比如获取验证码，比如获取服务器动态数据，这个时候就要避免使用浏览器中的缓存

方法一：在URL地址中添加随机数，这样使得URL是唯一的。

方法二：设置header头，禁止浏览器缓存该文件

header("Cache-Control:no-cache");
header("Pragma:no-cache");
header("Expires:-1");

5.PHP生成JSON数据

1、json_encode()：将PHP数据转成json格式
2、json_decode()：将JSON格式转成PHP数据格式

5.1将索引数组转成JSON格式、并逆转换

索引数组转成JSON格式还是数组的格式，逆转换用数组的位置做下标

5.2将关联数组转成JSON格式并逆转换

关联数组转成JSON格式还是字面量对象的格式，逆转换用数组的键做下标

5.3既有关联数组，也有索引数组

只要有一个元素是关联数组的形式，就转换成键值对的形式（字面量对象），没有键的元素用元素的位置做键。

5.4二维数组转换成JSON格式

5.5转换对象

6.FormData

FormData是表单数据对象，可以实现快速收集表单信息，HTML5以后才支持。
使用FormData对象post传递数据不需要设置setRequestHeader()

PHP页面

<?php
var_dump($_POST);

HTML页面

<script type="text/javascript">
 window.onload=function(){
    document.getElementById('btn').onclick=function(){
        var frm=document.getElementById('frm');
        var fd=new FormData(frm);   //收集frm表单的数据,文本数据和二进制数据
        var req=new XMLHttpRequest();
        req.open('post','./5-demo.php');
        req.onreadystatechange=function(){
            if(req.readyState==4 && req.status==200){
                console.log(req.responseText);
            }
        }
        req.send(fd);   //发送FormData对象
    }
 }
    
 </script>
 <form action="" id="frm">
    用户名：<input type="text" name="username" id=""><br>
    密码：<input type="password" name="pwd" id=""> <br>
    <input type="button" value="用户登录" id='btn'>
 </form>