今天突然想看下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. linux笔记2.25

    解决vsftpd用root登录不了的问题 把/etc/pam.d/vsftpd文件中的 auth       required    pam_listfile.so item=user sense=d ...

  2. 【结构型】Facade模式

    外观模式主要意图是为子系统提供一个统一的接口,从而使用用户对子系统的直接依赖中,解耦合出来.Facade主要是通过为子系统统一封装个入口一样,原先用户对子系统的接口.类等都是直接访问,现在要通过Fac ...

  3. Python自动化运维之4、格式化输出、文件对象

    Python格式化输出: Python的字符串格式化有两种方式: 百分号方式.format方式 百分号的方式相对来说比较老,而format方式则是比较先进的方式,企图替换古老的方式,目前两者并存.[P ...

  4. HADOOP在处理HIVE时权限错误的解决办法

    今天,小乔操作时发现问题: org.apache.hadoop.security.AccessControlException: Permission denied: user=root, acces ...

  5. mysql主从复制错误：Last_SQL_Error: Error 'Duplicate entry '327' for key 'PRIMARY'' on query. Default database: 'xxx'. Query: 'insert into

    这个算不算解决,我都不太清楚,因为我感觉网上的说法,只是把错误忽略了,不表示以后用从库时不会出问题!!! 解决的办法是在从库上执行: mysql> slave stop; mysql> s ...

  6. Qt入门（3）——信号和槽

    信号和槽用于对象间的通讯.信号/槽机制是Qt的一个中心特征并且也许是Qt与其它工具包的最不相同的部分.在图形用户界面编程中,我们经常希望一个窗口部件的一个变化被通知给另一个窗口部件.更一般地,我们希望 ...

  7. Delphi Dcp 和BPL的解释

    dcp = delphi compiled package,是 package 编译时跟 bpl 一起产生出来的,记录着 package 中公开的 class.procedure.function.v ...

  8. poj3177 Redundant Paths

    Description In order to get from one of the F (1 <= F <= 5,000) grazing fields (which are numb ...

  9. C plus plus primer plus

    1,运算符,操作数; 使用相同的符号(基本运算符,+ - * /  %),进行多种操作(指使用一个运算符符号,对不用类型的变量进行操作,int ,float,double),此概念将运算符的重载(op ...

  10. 创建多模块maven项目

    有两种方式: 1,new -->maven project-->maven-archetype-quickstart 建完多个独立的project后,手动修改pom文件的packing类型 ...