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 页面 ...
随机推荐
- QT参考录
源码参考: #include "CServerManager.h" CServerManager* CServerManager::m_pInstance = NULL; CSer ...
- OnCreate
用于创建插入符 /* CClientDC dc(this); TEXTMETRIC tm; dc.GetTextMetrics(&tm);//得到窗口字体信息 CreateSolidCaret ...
- 3.1 as86汇编器
在开始讲述as86汇编器前,这本书引用内核中bootsect.s框架程序汇编代码来解释,记录下这一小段代码中不理解的地方,下面是这段实例代码: .globl begtext, begdata, beg ...
- jquery中attr、prop、data
在高版本的jquery中获取标签的属性,可以使用attr().prop().data(),那么这些方法有什么区别呢? 对于HTML元素本身就带有的固有属性,在处理时,使用prop方法. 对于HTML元 ...
- apache2.2 虚拟主机配置详解
一.修改httpd.conf 打开appserv的安装目录,找到httpd.conf文件,分别去掉下面两行文字前面的#号. #LoadModule vhost_alias_module modules ...
- phpstorm 2016.1注册码
phper 享受生产PHP Web开发phpStorm.利用深代码理解,一流的编码的援助,并支持所有主要的工具和框架. 先看看 phpstorm 2016.1 带来那些新变化呢? 1,更好的PHP语言 ...
- regular expression (php函数)
1. 正则表达式是一种字符串搜索和匹配的工具 2. php中常用正则表达式函数 preg_match($pattern, $subject) preg_match_all($pattern, $sub ...
- JavaScript获取Select下拉框Option的Value和Text值的方法
Js获取select下拉列表框各个Option的Value值相对比较容易,不过获取Text值却有点麻烦,对于一个初学JavaScript的 新手来说,可能一时还无从下手,那么就请看下本文的方法,以一个 ...
- MFC自创建类了解
CxxxxView 视窗类 所有的按键 等消息都先在这里响应 CxxxxDoc 文档类 CMainFrame 框架类 CxxxxApp 应用程序类 CxxxxView类中的 OnDraw函数 在窗口改 ...
- 09 - 删除vtkDataObject中的ShouldIReleaseData() and ReleaseDataFlag 方法 VTK 6.0 迁移
VTK6 引入了许多不兼容的变.其中之一是删除vtkDataObject中所有有关管道的方法.下面列出来的就是其中的一些方法: ShouldIReleaseData() SetReleaseDataF ...