Ajax知识

一、跨域

  跨域可以简单的理解为从一个域名访问另一个域名,出于安全考虑,浏览器不允许这么做。

  https://www.baidu.com/->跨域http://www.qq.com/img、script、iframe等元素的src属性可以直接跨域请求资源

二、ajax跨域  

  1. 可以让服务器去别的网站获取内容然后返回页面

  2. 给页面的ajax一个url,ajax把这个url传给服务器,由服务器去访问跨域地址

三、ajax四个步骤(代码演示)

  

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax4</title>
</head>
<body>
  <div id="box"></div>
    <input type="button" value="请求数据" id="btn">
  </body>
  <script>
    var box=document.getElementById('box');
    var btn=document.getElementById('btn');

    btn.onclick=function() {
    // 1.创建.XMLHttpRequest对象
     if (window.XMLHttpRequest) {

      var xhr=new XMLHttpRequest();

    }else{
      var xhr=new ActiveXObject('Microsoft.XMLHTTP')
    };

    // 2.创建与服务器的链接
    xhr.open('GET','http://localhost/4.27ajax/test1.json',true);
    // 3.发送请求
    xhr.send(null);
    xhr.onreadystatechange=function() {
      // alert(xhr.readyState);
      if (xhr.readyState==4) {//服务器准备就绪
      if (xhr.status==200) {//数据返回成功
      var json=xhr.responseText;
      var jsons=eval('('+json+')');
      // alert(jsons.title.length);
      var text='';
      for (var i = 0; i < jsons.title.length; i++) {
        text+=jsons.title[i]+'作者:'+jsons.author[i]+'</br>';
      };
    box.innerHTML=text;
    }else{
  alert(xhr.status);
  }
  };
  };
  };
</script>
</html>

posted @ 2016-06-28 00:42  FallenLunatic  阅读(161)  评论(0编辑  收藏  举报