json和ajax

json

json是一种语法，用来序列化其他语言创建的数据类型，json支持六种数据类型，对象，数组，数值，字符串，布尔值，null
注意：不支持underfined，因为除了js外，其他语言不支持。

• stringify()方法是将js对象，序列化为JSON字符串
• parse() 将JSON字符串解析为对象

  stringify介绍

  stringify(data,replacer,space);
  replacer可以是数组和函数，用来过滤的
  space是用来格式化的

<script>
   //replacer是数组，过滤a和b的值
    JSON.stringify({a:1,b:2,c:3},["a","b"]);
   //replacer是函数
    JSON.stringify({a:1,b:2,c:3},(k,v)=>{
        //k表示键 v表示值
        if(v>2) return k;
    })
    //space是格式化json 每条数据前###
    JSON.stringify({a:1,b:2,c:3},null,"###");
    //parse是将json字符串解析为js对象
    let obj=JSON.parse(`{"a":1,"b":2,"c":3}`);
    JSON.parse(`{"a":1,"b":2,"c":3}`,(k,v)=>{
      if(k ==="b"){
          console.log(v);
          return v;
      }
  });
</script>

AJAX异步请求

XMLHttpRequest是浏览器对象，不是js对象
异步请求的步骤

1. 创建XMLHttpRequest
   const xhr=new XMLHttpRequest();

2. 配置参数
   xhr.open(type,url);
   3.处理响应
   xhr.onload(…)
   =>{…}
   4.发送请求
   xhr.send(…);

   属性

   responseType 响应类型
   response 响应正文

• get请求的，直接在url配置参数，则send（null)
• post请求
  使用FormData来创建对象，来添加参数

  let data=new FormData();
    //添加到data中
    data.append("name",form.email.value);
    //通过get获取添加的数据
    data.get("name");
  简化为直接在send(new FormData(form));
  将表单对象放到l里面
  send(new FormData(form));

  理解跨域的原理，并写出cors,jonp的源码并做出总结

  跨域

  cors:跨域资源共享
  同源策略：为请求的安全，浏览器禁止通过脚本发起一个跨域请求
  同源是协议相同。域名/主机名相同，端口相同
  http和https是协议不同。
  跨域需要被访问的页面，请求头自定来源域名

  header('Access-Control-Allow-Origin:http://www.baidu.com');

  jsop

  浏览器不允许跨域，则使用jsonp来跨域
  jsonp包含两部分，回调函数，+ json数组
  回调函数：请求接收到响应时回调的函数，可动态设置
  回调参数：作为参数传递时函数的json数据
  jsonp: 巧妙的利用了script标签发起的请求不受跨域限制的特征
  注意：jsonp只能完成get请求
  本质是：在js文本中有一个函数
  ，服务器返回此函数的调用

function getUser(data){
       let user=data.name+":"+data.email;
       document.querySelector("p").innerHTML=user;
   }
   //getUser({name:"小明","email:tp@php.cn"});
   //从前端将这个前端需要调用的函数名称告诉服务器上的php，让php动态生成一个函数调用语句并返回
  //从服务器返回函数调用语句`getUser({name:"小明","email:tp@php.cn"})`;
  //这就是jsonp的原理
  const btn=document.querySelector("button");
  btn.onclick=()=>{
      //动态生成一个允许跨域请求的html元素
      let script=document.creatElement("script");
      //将跨域请求的url添加到src中。将函数名传给php
      script.src="http:...cors3.php?callback=getUser"
      //将script插入到boy