zoukankan      html  css  js  c++  java
  • 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>

  • 相关阅读:
    错误处理和调试 C++快速入门30
    错误处理和调试 C++快速入门30
    虚继承 C++快速入门29
    多继承 C++快速入门28
    界面设计01 零基础入门学习Delphi42
    鱼C记事本 Delphi经典案例讲解
    界面设计01 零基础入门学习Delphi42
    虚继承 C++快速入门29
    linux系统中iptables防火墙管理工具
    linux系统中逻辑卷快照
  • 原文地址:https://www.cnblogs.com/patriot/p/5622008.html
Copyright © 2011-2022 走看看