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放大镜效果
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="demo4.aspx.cs& ...
- eclipse sae上传代码
eclipse sae上传代码http://www.sinacloud.com/doc/sae/java/tools.html#eclipse 来自为知笔记(Wiz)
- CURL请求接口
private function http_curl($url,$data=null){ //1.初始化,创建一个新cURL资源 $ch = curl_init(); ...
- ASP.net 中关于Session的存储信息及其它方式存储信息的讨论与总结
通过学习和实践笔者总结一下Session 的存储方式.虽然里面的理论众所周知,但是我还是想记录并整理一下.作为备忘录吧.除了ASP.net通过Web.config配置的方式,还有通过其它方式来存储的方 ...
- Css溢出隐藏
display: -webkit-box;-webkit-line-clamp: 2; /*多少行数之后显示为省略...*/word-wrap: break-word;word-break: ...
- ssh登陆设置快捷方式
在自己的环境下配置 ~/.ssh/config Host k231 HostName 192.168.1.231 User kyee 原来ssh 登陆192.168.1.231 的命令是 ssh ky ...
- centos 下mysql操作
MySQL名字的来历MySQL是一个小型关系型数据库管理系统,MySQL被广泛地应用在Internet上的中小型网站中.由于其体积小.速度 快.总体拥有成本低,尤其是开放源码这一特点,许多中小型网站为 ...
- Html中input标签的使用
1.取消按钮按下时的虚线框 在input里添加属性值 hideFocus 或者 HideFocus=true 2.只读文本框内容 在input里添加属性值 readonly 3.防止退后清空的TEXT ...
- 最难忘的Bug调试经历
摘要:目前,著名的社区问答网站Quora上出现一个很火的讨论:你调试过最难的Bug是什么?大家纷纷留言,把自己最痛苦的一次调试经验写下来. 相信每位程序员都有过一段不堪回首地Bug调试经历,程序员一听 ...
- 编译TWRP-recovery教程及源码地址
TWRP这个是一个老外的开源项目,全称Team-Win-Recovery-Project Source:https://github.com/TeamWin/Team-Win-Recovery-Pro ...