day18

Posted 2020-08-17

# AJAX
#### **创建ajax对象的方法：**
```javascript
(function(){
    创建ajax对象的方法
    var xhr = new XMLHttpRequest();
    IE低版本下创建ajax对象的方法(兼容到IE8以下)
    var xhr = new ActiveXObject(‘Microsoft.XMLHTTP‘);
    
    同时兼容主流浏览器和IE8以下的版本：
    if(window.XMLHttpRequest){
        xhr = new XMLHttpRequest();
    }else{
        xhr = new ActiveXObject(‘Microsoft.XMLHTTP‘);
    };
     配置ajax的参数；
         xhr.open(‘GET‘,‘链接数据库的地址‘，‘同步或者异步事件，同步为false;异步为true‘)
     GET方式添加数据：
         xhr.open(‘GET‘,‘链接数据库的地址？name=Bob&age=20‘，‘同步或者异步事件，同步为false;异步为true‘)
         ‘name=Bob&age=20‘在浏览器显示在qvery string;
     post方式添加数据：
         1.xhr.open(‘GET‘,‘链接数据库的地址‘，‘同步或者异步事件，同步为false;异步为true‘)
         2.xhr.setRequestHeader(‘Content-type‘,‘application/x-www-form-urlencoded‘);
         //把数据的格式化转化为表单的格式（这一部必须要写）；
         3.xhr.send(‘name=Bob&age=20‘)
         //括号里面写需要的添加的数据
         4.post方法不支持本地文件
     发送请求：
     xhr.send()：
      接受响应：
     第一种方法;（现代事件的表示方法）
     xhr.addEvebtListener(‘readystatechange‘,function(){
         if(xhr.readyState === 4 && xhr.status === 200){
            console.log(xhr.responseText);
         }
     },false);
     第二种方法：(传统事件的表示方法)
      xhr.onreadystatechange = function(){
         if(xhr.readyState === 4 && xhr.status === 200){
            console.log(xhr.responseText);
         } 
      }
})();
```
## localStorage(本地存储)
```javascript
(function(){
    var a =10;
    console.log(a);//输出10
    localStorage.a=‘hello‘;
    console.log(‘localStorage.a‘);//输出hello
    在localStorage中只能存储字符串类型的数据：
    如果我们要把数据储存需要把数组里面的数据转化成字符串才能存储在localStorage
    把json格式的文本转化成真正的数组方法：
    JSON.parse(json数据);
    把真的数组转化成json格式的文本方法：
    JSON.stringify(数组);
})();
```
## eval函数
      把某一段字符串，当作js代码来执行
      var listOfStudents = eval(xhr.responseText);
      eval函数最大的弊端就是安全性太差，因为eval函数在浏览器的权限太高；
      所以一般都不使用eval