Ajax知识（二）

1、ajax：异步的JavaScript和XMl。

2、异步、同步

  异步：事情同时进行。
  同步：先做一件事再做一件事。

3、jQuery版本的不同

  主要解决的区别是兼容不兼容IE。
  在jQuery的1.几版本兼容IE，但是更高的版本 2.几，3.几就开始不兼容IE了。

4、jQuery版的ajax几个方法

  1. $.ajax() 方法
        本形：
  `    $.ajax({
    // 地址
    url: "",
    // 类型 post或者get
    type: 'post',
    // 参数
    data: {},
    //设置数据的传输格式
    contentType:'',
    // 回调函数
    success: function (res) {
        console.log(res);
    },
    error: function (error) {
        console.log(404);
    }

})`

  2. $.get() 、$.post()

   其实就是$.ajax()方法的具体，具体type是get还是post 

  $.get(url,data,function,dataType)
  $.post(url,data,function,dataType)
  其中：url、function是必选，在post方式的话 data也可能是必选。
  
  3. load（）方法
        把请求的数据添加到指定容器中。
  load（url，data，function（response，status，xhr）{}）
  其中response：返回请求的结果数据，status：请求的状态，xhr：返回XMLHTTPRequest对象

   $('#div1').load('hello.txt', function (responseTxt, statusTxt, xhr) {
            console.log(responseTxt); //请求回来的内容
            console.log(statusTxt); //请求的状态 success   error
            console.log(xhr)   //ajax的实例对象
        })

  注意：使用load（）会产生跨域问题

5、跨域、同源

  协议、域名、端口号全部一致叫做同源。
  协议、域名、端口只要有一个不一致就会出现跨域。
  如：https://www.baidu.com/
     http://www.baidu.com/  两者协议不一样，必然是会出现跨域
  出现的错误提示：No 'Access-Control-Allow-Origin' header is present on the requested resource.

解决方法：

  1、jsonp
  2、后台配置
  3、设置代理
 jsonp原理：在$.ajax() 里添加dataType：jsonp， 动态创建script标签，通过src属性指向URL解决跨域问题。

         $.ajax({
        url:'https://www.baidu.com?callback=fn',
        type:'get',
        dataType:'jsonp',
        success:function (res) {
            console.log(res)   //No 'Access-Control-Allow-Origin' header is present on the requested resource.
        }
    })
})
// jsonp的实现原理  动态创建script标签
var url = 'https://www.baidu.com?callback=fn';
var script = document.createElement('script');
document.getElementsByTagName('head')[0].appendChild(script);
script.setAttribute('src',url)
function fn(name,age) {
    // 业务逻辑
}

6、JSON 是什么？

  1、一种语法：存储和交换文本
  2、轻量级的文本数据交换格式
  3、相对于XML来说，更小、更快、更易解析。

json对象和字符串的转换：

  1、JSON.parse()将字符串转换成JSON对象
  2、JSON.Stringify()将JSON对象转换成字符串。

注意：JSON 的对象属性要加上双引号""!!!

7、JSON数组

     var json1 = { "name": "郭俊强", "age": 30, "hobby": ["playGame", "eat", "runing"] }
      // 对象打点的方式
      console.log(json1.name);
      console.log(json1['name']);
      console.log(json1['name']);
      // for in 
      for (var x in json1.hobby) {
          console.log(json1.hobby[x])
      }
      // forEach 
      json1.hobby.forEach(function (value, index) {
          console.log(value);
          console.log(index);
      })