JavaScript和ajax 跨域的案例
今天突然想看下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 跨域的案例的更多相关文章
- JavaScript 和Ajax跨域问题
json格式: { "message":"获取成功", "state":"1", "result": ...
- Ajaxadr ajax跨域请求crossdomain
最近工作需要用到ajax跨域请求参数,网上找很很久,最终得到解决之道.分享一下吧,希望能帮到各位 也许你已经发现在浏览器直接敲路径能获得对方提供接口的参数,而一到项目中Ajax请求却老是失败.原因是, ...
- ajax 跨域 headers JavaScript ajax 跨域请求 +设置headers 实践
解决跨域调用服务并设置headers 主要的解决方法需要通过服务器端设置响应头.正确响应options请求,正确设置 JavaScript端需要设置的headers信息 方能实现. 此处手札 供后人参 ...
- 百度的一个Ajax跨域方法 JavaScript是没有域的限制
baidu的通行证处理都是在二级域名passport.baidu.com中处理的,但是baidu很多地方登录都好像是用ajax处理的,他是怎么做的呢?研究了一下,发现一个小技巧. 在http://zh ...
- 【转】ajax 跨域 headers JavaScript ajax 跨域请求 +设置headers 实践
解决跨域调用服务并设置headers 主要的解决方法需要通过服务器端设置响应头.正确响应options请求,正确设置 JavaScript端需要设置的headers信息 方能实现. 此处手札 供后人参 ...
- Javascript&Ajax-深入浅出JSONP--解决ajax跨域问题
Javascript&Ajax-深入浅出JSONP--解决ajax跨域问题 原理讲解: 链接地址:http://www.cnblogs.com/chopper/archive/2012/03/ ...
- ajax跨域问题解决方案
今天来记录一下关于ajax跨域的一些问题.以备不时之需. 跨域 同源策略限制 同源策略阻止从一个域上加载的脚本获取或操作另一个域上的文档属性.也就是说,受到请求的 URL 的域必须与当前 Web 页面 ...
- Ajax跨域问题及解决方案
目录 复现Ajax跨域问题 Ajax跨域介绍 Ajax跨域解决方案 一. 在服务端添加响应头Access-Control-Allow-Origin 二. 使用JSONP解决 小结 复现Ajax跨域问题 ...
- 今天来记录一下关于ajax跨域的一些问题。以备不时之需。
今天来记录一下关于ajax跨域的一些问题.以备不时之需. 跨域 同源策略限制 同源策略阻止从一个域上加载的脚本获取或操作另一个域上的文档属性.也就是说,受到请求的 URL 的域必须与当前 Web 页面 ...
随机推荐
- js限制textarea文本框的文字个数
现在发微博,那个文本框一般只能输入200字好像,再多就会自动删除,要么是提示字数受限,用Js就可实现本功能.今天带来的这个Js限制表单文本 框文字数量的例子,相信有此方面需要的是个不错的参考.为了便于 ...
- 线性表顺序存储方式的C语言实现
/* 编译器VC6++ 文件名1.cpp 代码版本号:1.0 时间:2015年9月14日16:39:21 */ #include <stdio.h> #include <stdlib ...
- mvc 生成输出url
最近一直在学习mvc,其中对于 Url.Action生成的url感到很困惑.官方的解释的基于路由方案生成的url.问题是,怎样基于,怎样选择,没有过多的解释.网上找了很多资料,也看不懂,最后还是在pr ...
- 移植rom移动TD到联通W
1.修改build.prop TD为 ril.flightmode.poweroffMD=0 ril.telephony.mode=2 改为 ril.flightmode.poweroffMD=1 r ...
- Excel表无法正常打开
Excel表无法正常打开 处理:从菜单栏中的文件中,找到任何一个Excel表正常打开之后,在工具->选项->常规-> 去掉“忽略其他应用程序”,确认,关闭表格再次打开即正常.
- [51单片机]18B20驱动函数
/**********DS18B20.h**********/ #include "REG52.H" #include "INTRINS.H" sbit DQ ...
- 转：内核中的内存申请:kmalloc、vmalloc、kzalloc、kcalloc、get_free_pages
在内核模块中申请分配内存需要使用内核中的专用API:kmalloc.vmalloc.kzalloc.kcalloc.get_free_pages;当然,设备驱动程序也不例外;对于提供了MMU功能的处理 ...
- WebAPI 用户认证防篡改实现HMAC（二）签名验证 AbsBaseAuthenticationAttribute--转
public class ActionFilter : ActionFilterAttribute { public override void OnActionExecu ...
- op编译信赖的库
Table of known prerequisites and their corresponding packages Here's a table with the package name f ...
- OCX控件的注册卸载,以及判断是否注册
方法一:在dos或Windows命令行下运行:regsvr32 ocxname.ocx 注册 示例:regsvr32 netshare.ocx //注册netshare.ocx控件regsvr ...