AJAX 和 JSON

这里写图片描述

XMLHttpRequest对象
这里写图片描述

  if (xhr.readyState === 4 && xhr.status == 200) {//前一个检测请求是否完成  后一个确保请求成功了

因为请求失败也是4 所以要结合状态码来看

这里写图片描述

在本地安装服务器的几个方式
这里写图片描述

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>表单提交</title>
</head>
<body>
  <button id="btn">获取数据</button>
  <pre id="store"></pre>
  <script>
  var btn = document.getElementById('btn'),
    store = document.getElementById('store')

  btn.addEventListener('click', ajax)

  function ajax () {
    var xhr = window.XMLHttpRequest ? (new XMLHttpRequest()) : (new ActiveXObject('Microsoft.XMLHTTP'));//兼容ie浏览器
    xhr.open('GET', './data.json')//第三个参数truefalse控制同步异步 默认异步
    xhr.onreadystatechange = loadData

    function loadData () {
      if (xhr.readyState === 4 && xhr.status == 200) {//前一个检测请求是否完成  后一个确保请求成功了
        //console.log(xhr)
//          xhr.responseType = 'json'
        store.innerHTML = xhr.response
      }
    }
    xhr.send()
  }
  </script>
</body>
</html>

data.json

{"data": {},"errno": 0}

XHR
这里写图片描述

这里写图片描述

*post方法要注意设置requestHeader
这里写图片描述

‘name=“abc”’

*另 如果采用forData的方法就不用
这里写图片描述

abort
终止一个ajax请求
请求已发出时 readyState会被置为0 但不会触发readyStatechange事件
通常用于重复向服务器发送相同请求的时候会终止前面的相同请求

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>XHR 对象</title>
</head>
<body>
  <button id="btn">获取数据</button>
  <pre id="store"></pre>
  <script>
  var btn = document.getElementById('btn'),
    store = document.getElementById('store')

  btn.addEventListener('click', ajax)

  function ajax () {
    var src = './data.php'

    var xhr = new XMLHttpRequest()

    xhr.open('GET', src)

    xhr.onreadystatechange = loadData
    xhr.responseType = 'json'
    xhr.send()
    console.log(xhr.readyState)
    xhr.abort()
    console.log(xhr.readyState)
    function loadData () {
      if (xhr.readyState === 4 && xhr.status === 200) {
        store.innerHTML = JSON.stringify(xhr.response, null, 2)
      }
    }
  }
  </script>
</body>
</html>

这里写图片描述

这里写图片描述

这里写图片描述

这里写图片描述

upload 可以用于显示进度条

这里写图片描述

这里写图片描述

这里写图片描述

这里写图片描述

CORS跨域
什么是跨域?
不同的域名 不同端口 不同协议
这里写图片描述
CORS实现跨域的简单例子

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>XHR 对象</title>
</head>
<body>
  <button id="btn">获取数据</button>
  <pre id="store"></pre>
  <script>
  var btn = document.getElementById('btn'),
    store = document.getElementById('store')

  btn.addEventListener('click', ajax)

  function ajax () {
    var src = 'http://sub.local.com/cors-data.php'

    var xhr = new XMLHttpRequest()

    xhr.open('GET', src)

    xhr.onreadystatechange = loadData
    xhr.responseType = 'json'
    xhr.send()

    function loadData () {
      if (xhr.readyState === 4 && xhr.status === 200) {
        store.innerHTML = JSON.stringify(xhr.response, null, 2)
      }
      if (xhr.readyState === 4){
          console.log(xhr.status)
      }
    }
  }
  </script>
</body>
</html>

cors-data.php

<?php
//sub.local.com
  sleep(1);
  header('Access-Control-Allow-Origin:*')
  echo "{\"data\":{},\"errno\":0}"
?>

简单请求和复杂请求
这里写图片描述

预检请求失败后面真正请求不会发送

cors需要服务端设置响应头字段设置。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>XHR 对象</title>
</head>
<body>
  <button id="btn">获取数据</button>
  <pre id="store"></pre>
  <script>
  var btn = document.getElementById('btn'),
    store = document.getElementById('store')

  btn.addEventListener('click', ajax)

  function ajax () {
    var src = 'http://sub.local.com/cors-data.php'

    var xhr = new XMLHttpRequest()

    xhr.open('GET', src)
    xhr.setRequestHeader('abc', '123')
    xhr.onreadystatechange = loadData
    xhr.responseType = 'json'
    xhr.send()

    function loadData () {
      if (xhr.readyState === 4 && xhr.status === 200) {
        store.innerHTML = JSON.stringify(xhr.response, null, 2)
      }
      if (xhr.readyState === 4){
          console.log(xhr.status)
      }
    }
  }
  </script>
</body>
</html>
<?php
//sub.local.com
  sleep(1);
  header('Access-Control-Allow-Origin:*')
  header('Access-Control-Allow-Headers: abc')
  echo "{\"data\":{},\"errno\":0}"
?>

这里写图片描述

只允许一个域名 多个域名用 逗号隔开是不允许的

如果需要cookie进行验证必须加上这个字段

这里写图片描述

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>XHR 对象</title>
</head>
<body>
  <button id="btn">获取数据</button>
  <pre id="store"></pre>
  <script>
  var btn = document.getElementById('btn'),
    store = document.getElementById('store')

  document.cookie = 'name=client;';
  btn.addEventListener('click', ajax)
  function ajax () {
    var src = 'http://sub.local.com/cors-data-with-cookie.php'

    var xhr = new XMLHttpRequest()
    xhr.withCredentials = true

    xhr.open('GET', src)
    xhr.onreadystatechange = loadData
    xhr.responseType = 'json'
    xhr.send()

    function loadData () {
      if (xhr.readyState === 4 && xhr.status === 200) {
        store.innerHTML = JSON.stringify(xhr.response, null, 2)
      }
    }
  }
  </script>
</body>
</html>
<?php
//sub.local.com
  sleep(1);
  header('Access-Control-Allow-Origin:http://dev.local.com');
  header('Access-Control-Allow-Headers: abc');
  //header('Set-cookie: name=imooc'); 这里要是不注释 name显示的是imooc而不是client
  $name = $_COOKIE['name'];
  echo "{\"data\" :{\"name\":\"".$name."\"},\"errno\":0}"
?>

获取字段
这里写图片描述

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>XHR 对象</title>
</head>
<body>
  <button id="btn">获取数据</button>
  <pre id="store"></pre>
  <script>
  var btn = document.getElementById('btn'),
    store = document.getElementById('store')

  btn.addEventListener('click', ajax)
  function ajax () {
    var src = 'http://sub.local.com/cors-data-with-cookie.php'

    var xhr = new XMLHttpRequest()

    xhr.open('GET', src)
    xhr.onreadystatechange = loadData
    xhr.responseType = 'json'
    xhr.send()

    function loadData () {
      if (xhr.readyState === 4 && xhr.status === 200) {
        store.innerHTML = JSON.stringify(xhr.response, null, 2)
          console.log(xhr.getResponseHeader('Date'))
      }
    }
  }
  </script>
</body>
</html>
<?php
//sub.local.com
  sleep(1);
  header('Access-Control-Allow-Origin:http://dev.local.com');

    header('Access-Control-Expose-Headers: Date'
  echo "{\"data\" :{\"name\":\"abc\"},\"errno\":0}"
?>

CORS跨域只需要Ajax的基础上在服务端添加header(’ Access-Control-Allow-Origin:* / 指定域名 ‘);即可

如果需要携带cookie,服务端添加 header(’ Access-Control-Allow-Creedntials : true ‘) , Ajax中添加XHR . withCreedntials = true; 同时,在script标签中加入document.cookie = ’ cookie ‘即可。
正常使用AJAX会需要正常考虑跨域问题,CORS(Cross-origin resource sharing)就是一套AJAX跨域问题的解决方案,严格来说,它不是AJAX的变种,它是为了解决跨域问题而衍生的一个机制。

它允许一个域上的网络应用向另一个域提交跨域 AJAX 请求。实现此功能非常简单,只需由服务器发送一个响应标头即可,就像你上面写的服务端添加 header();如果需要携带cookie,你写代码的是正确的。

ajax
全局配置

展开阅读全文

没有更多推荐了,返回首页