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 页面 ...
随机推荐
- Eclipse读取xml中文乱码问题解决
解决eclipse读取xml时中文乱码报错问题 在eclipse.ini中加入下而一行 -Dfile.encoding=UTF-8
- Windows 7 64位下解决不能创建Django项目问题
把djingo-admin.py的全路径写出来 在cmd命令行下直接输入python C:\Python27\Scripts\django-admin.py startproject site(sit ...
- oracle中char,vchar,vchar2的区别与联系
1.char是固定长度的,例如你定义某一列类型为char(20).那么即便你插入"abcde"5个字节,数据库也会在后面自动加上15个字节(可能为空格),以补足二十个字节. 2.v ...
- js十进制等互相转换
//十进制转其他 var x=110; alert(x); alert(x.toString(8)); alert(x.toString(32)); alert(x.toString(16)); / ...
- phpcms v9 表单向导里添加图片字段，提示会话过期,请重新登陆
用 phpcms v9 制作前端用户提交信息时,有个图片上传的栏目. 如果注释 /phpcms/modules/attachment/attachment.php 20//判断是否登录 21 if(e ...
- linux磁盘空间用满的处理方法
linux下空间满可能有两种情况 可以通过命令 df -h 查看磁盘空间占用,实际上是查看磁盘块占用的文件(block) df -i 查看索引节点的占用(Inodes) 磁盘块和索引节点其中之一满 ...
- hadoop+spark+mongodb+mysql+c#
一.前言 从20世纪90年代数字化医院概念提出到至今的20多年时间,数字化医院(Digital Hospital)在国内各大医院飞速的普及推广发展,并取得骄人成绩.不但有数字化医院管理信息系统(HIS ...
- 通过button提交表单
通过 input button 而不是input submit提交. <!DOCTYPE html> <html lang="en"> <head&g ...
- poj 1819 Disks
http://poj.org/problem?id=1819 #include <cstdio> #include <cstring> #include <cmath&g ...
- 在Activity的生命周期中，会被系统回调的方法
onCreate(Bundle savedStatus):创建Activity时被回调.onStart():启动Activity时被回调.onRestart():重新启动Activity时被回调.on ...