写一个最简单的例子：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>
<input type="button" onclick="XmlSendRequest();" value='Ajax请求' />
</p>
<script type="text/javascript" src="jquery-1.12.4.js"></script>
<script>
function JXmlSendRequest(){
$.ajax({
url: "http://c2.com:8000/test/", // 访问url地址
type: 'GET', // get方式提交
dataType: 'text', // 数据类型
success: function(data, statusText, xmlHttpRequest){ // 成功后返回的结果
console.log(data);
}
})
}
</script>
</body>
</html>
跨域ajax
由于浏览器存在同源策略机制，同源策略阻止从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性。所以ajax本身是不可以跨域的，通过产生一个script标签来实现跨域。因为script标签的src属性是没有跨域的限制的。
浏览器同源策略并不是对所有的请求均制约：
•制约： XmlHttpRequest
•不制约： img、iframe、script等具有src属性的标签
注：自己模拟跨域，需要现在自己电脑的host文件里面添加两条域名，我这里添加的是zhangyanlin.com和aylin.com这两个域名
一、JSONP实现跨域请求
JSONP是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问。jsonp只能通过get方式进行跨域请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="Ajax" onclick="DoAjax();"/>
<input type="button" value="JsonpAjax" onclick="JsonpAjax();"/>
<script src="/statics/jquery-1.12.4.js"></script>
<script src="http://aylin.com:8002/statics/jquery.cookie.js"></script>
<script>
function func(arg) {
console.log(arg); // 输出结果就是python代码给传过来的列表[11,22,33,]
}
function DoAjax() {
$.ajax({
url: 'http://alex.com:8002/index',
type: 'POST',
data: {'k1': 'v1'},
success: function (arg) {
console.log(arg);
}
});
}
function JsonpAjax() {
// var tag = document.createElement('script');
// tag.src = "http://alex.com:8002/index";
// document.head.appendChild(tag);
// document.head.removeChild(tag);
$.ajax({
url: "http://aylin.com:8002/index",
dataType: 'jsonp',
jsonpCallBack: 'func' // 对端给返回函数名，函数接收的参数是内容
})
}
</script>
</body>
</html>
