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对象
异步请求的步骤

创建XMLHttpRequest
const xhr=new XMLHttpRequest();
配置参数
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

json

stringify介绍

AJAX异步请求

属性

跨域

jsop

相关文章