今天突然想看下JavaScript和ajax 跨域问题，然后百度看了一下，写一个demo出来

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <title></title>

     <script src="js/jquery-2.0.3.min.js"></script>

     <style type="text/css">

         #wrap {

             width: 500px;

             margin: 200px auto;

         }

         #txtSearch {

             width: 400px;

         }

         #mydiv {

             width: 400px;

             border: 1px solid gray;

         }

             #mydiv ul {

                 margin: 0px;

                 padding: 0px;

                 list-style-type: none;

             }

     </style>

     <script type="text/javascript">

         var xhr = createXHR();

         function createXHR() {

             var request;

             if (XMLHttpRequest)

                 request = new XMLHttpRequest();

             else

                 request = new ActiveXObject("Microsoft.XMLHTTP");

             return request;

         }

         // xhr.open("get", "http://suggestion.baidu.com/su?wd=" + wd + "&json=1&p=3&sid=&req=2&cb=jQuery110207007932646665722_1411810869509&_=1411810869512", true);

         window.onload = function () {

             my$("txtSearch").onkeyup = function () {

                 var wd = this.value;//文本框的值

                 //判断页面上有没有动态生成的div。如果有删除

                 var div = my$("mydiv");

                 if (div) {

                     my$("wrap").removeChild(div);

                 }

                 if (wd.length == 0) {

                     return;

                 }

                 yandi = function (data) {

                     var array = eval(data.s);

                     if (array && array.length > 0)

                     {

                         //动态生成DIV

                         var div = document.createElement("div");

                         div.id = "mydiv";

                         my$("wrap").appendChild(div);

                         //创建UL

                         var ul = document.createElement("ul");

                         div.appendChild(ul);

                         //创建li

                         for (var i = 0; i < array.length; i++)

                         {

                             var li = document.createElement("li");

                             li.innerHTML=array[i];

                             ul.appendChild(li);

                             //光棒效果

                             li.onmouseover = function () {

                                 this.style.backgroundColor = "gray";

                             }

                             li.onmouseout = function () {

                                 this.style.backgroundColor = "";

                             }

                         }

                     }

                 }

                 var url = "http://suggestion.baidu.com/su?wd=" + wd + "&json=1&p=3&sid=&req=2&cb=yandi&_=1411810869512&callback=yandi";

                 var script = document.createElement("script");

                 script.setAttribute("src", url);

                 document.getElementsByTagName("head")[0].appendChild(script);

                 //ajax跨域

                 //$.ajax({

                 //    type: "get",

                 //    async: true,

                 //    url: "http://suggestion.baidu.com/su?wd=" + wd + "&json=1&p=3&sid=&req=2&cb=yandi&_=1411810869512",

                 //    dataType: "jsonp",

                 //    jsonp: "callback",

                 //    jsonpCallback: "yandi",

                 //    success: function (data) {

                 //        alert(/2/);

                 //        document.getElementById("11").innerHTML = data.s;

                 //    },

                 //    error: function () {

                 //        alert(/11/);

                 //        document.getElementById("11").innerHTML = "111111";

                 //    }

                 //});

             }

             //yandi = function (data) {

             //    var arry = eval(data.s);

             //    //alert(arry.length);

             //    alert(data.s);

             //    document.getElementById("11").innerHTML = data.s;

             //}

         };

         function my$(id) {

             return document.getElementById(id);

         };

     </script>

 </head>

 <body>

     <div id="wrap">

         <input type="text" id="txtSearch" /><input type="button" value="search" />

         <div id="11"></div>

     </div>

 </body>

 </html>

javascript和ajax跨域代码

JavaScript和ajax 跨域的案例的更多相关文章

  1. JavaScript 和Ajax跨域问题

    json格式: { "message":"获取成功", "state":"1", "result": ...

  2. Ajaxadr ajax跨域请求crossdomain

    最近工作需要用到ajax跨域请求参数,网上找很很久,最终得到解决之道.分享一下吧,希望能帮到各位 也许你已经发现在浏览器直接敲路径能获得对方提供接口的参数,而一到项目中Ajax请求却老是失败.原因是, ...

  3. ajax 跨域 headers JavaScript ajax 跨域请求 +设置headers 实践

    解决跨域调用服务并设置headers 主要的解决方法需要通过服务器端设置响应头.正确响应options请求,正确设置 JavaScript端需要设置的headers信息 方能实现. 此处手札 供后人参 ...

  4. 百度的一个Ajax跨域方法 JavaScript是没有域的限制

    baidu的通行证处理都是在二级域名passport.baidu.com中处理的,但是baidu很多地方登录都好像是用ajax处理的,他是怎么做的呢?研究了一下,发现一个小技巧. 在http://zh ...

  5. 【转】ajax 跨域 headers JavaScript ajax 跨域请求 +设置headers 实践

    解决跨域调用服务并设置headers 主要的解决方法需要通过服务器端设置响应头.正确响应options请求,正确设置 JavaScript端需要设置的headers信息 方能实现. 此处手札 供后人参 ...

  6. Javascript&Ajax-深入浅出JSONP--解决ajax跨域问题

    Javascript&Ajax-深入浅出JSONP--解决ajax跨域问题 原理讲解: 链接地址:http://www.cnblogs.com/chopper/archive/2012/03/ ...

  7. ajax跨域问题解决方案

    今天来记录一下关于ajax跨域的一些问题.以备不时之需. 跨域 同源策略限制 同源策略阻止从一个域上加载的脚本获取或操作另一个域上的文档属性.也就是说,受到请求的 URL 的域必须与当前 Web 页面 ...

  8. Ajax跨域问题及解决方案

    目录 复现Ajax跨域问题 Ajax跨域介绍 Ajax跨域解决方案 一. 在服务端添加响应头Access-Control-Allow-Origin 二. 使用JSONP解决 小结 复现Ajax跨域问题 ...

  9. 今天来记录一下关于ajax跨域的一些问题。以备不时之需。

    今天来记录一下关于ajax跨域的一些问题.以备不时之需. 跨域 同源策略限制 同源策略阻止从一个域上加载的脚本获取或操作另一个域上的文档属性.也就是说,受到请求的 URL 的域必须与当前 Web 页面 ...

随机推荐

  1. java事件处理2

    Document事件 这个事件有点特别,需要用getDocument()返回到自己所维护的文档,然后就可以添加监视器 (textArea1.getDocument).addDocumentListen ...

  2. VS2013 编译 MySql Connector C 6.1.6

    1.下载cmake http://cmake.org/ 2.下载最新版MySql Connector C http://www.mysql.com 3.命令行下,转到源代码目录下,"cmak ...

  3. 数据（数组，json）的处理

    有些时候我们在做联动事件以及获取动态的数据是,给到我们的都是数组,json格式的数据. 为了方便快速的处理这些数据,jq给我们提供了很多简便的方法. each()方法 在jQuery里有一个each方 ...

  4. C盘hosts

    # Copyright (c) - Microsoft Corp. # # This is a sample HOSTS file used by Microsoft TCP/IP for Windo ...

  5. bayes

    from numpy import * import time starttime = time.time() def loadDataSet(): postingList = [['my', 'do ...

  6. C程序设计语言练习题1-13

    练习1-13 编写一个程序,打印输入中单词长度的直方图.水平方向的直方图比较容易绘制,垂直方向的直方图则要困难些. 代码如下: #include <stdio.h> // 包含标准库的信息 ...

  7. 隐藏NGINX服务器名称 和版本号

    隐藏NGINX服务器名称: 修改或隐藏服务器名称需要修改源码nginx.h,nginx.h在src/core/目录下 .具体操作如下: 把下面两个宏的值修改为自己设定的值,例如"NGX&qu ...

  8. 磁盘IO单线程顺序写时最快的，如果多线程写，磁盘的磁头要不断重新寻址，所以写入速度反而会慢

    (1) 读写最好还是不要多线程,硬盘读写的速度有限,单线程时已经满负荷了,多线程又会增加线程之间的切换,会增加时间. 如果想增加读写速度,应该增加硬盘,做raid (2)首先是硬盘的写入是串行的,CP ...

  9. 深入理解JavaScript Hijacking原理

    最近在整理关于JavaScript代码安全方面的资料,在查关于JavaScript Hijacking的资料时,发现关于它的中文资料很少,故特意整理一下. 一.JavaScript Hijacking ...

  10. word 生成目录

    生成目录: (1)Ctrl+End,到达文档的最后一页: (2)"插入"菜单--引用--索引和目录(此时出现索引和目录对话框): (3)单击"目录"选项卡 a. ...