ajax请求-解放每次手动输url
js的XMLHttpRequest对象
我们使用XMLHttpRequest对象来发送一个Ajax请求
用xhr发一个ajax请求
因为我是webstorm,因此自带音响哈.
这里我们用ajax来请求这个接口,并将内容打印到console口
var xhr = new XMLHttpRequest(); //1.创建xhr对象
xhr.open('get', 'http://localhost:63343/web_learn/ajax/ajax/data.txt', true); //2.准备发起url,默认异步true
xhr.onreadystatechange = function () { //3.回来的数据该怎么处理?
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
};
xhr.send(null); //4.开始发射
同源访问-简写url
var xhr = new XMLHttpRequest();
xhr.open('get', 'data.txt', true);//这里url可以简写哦,默认代表访问源
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
};
xhr.send(null);
异源访问
xhr = new XMLHttpRequest();
xhr.open('get', 'http://www.weather.com.cn/data/sk/101010100.html', true); //跨站访问不允许Access-Control-Allow-Origin' header
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200){
console.log(xhr.responseText);
}
};
xhr.send(null);
ajax跨源访问是不允许的, 浏览器不允许他这样搞. 也是为了安全的缘故吧.
解决ajax异源请求
浏览器不允许ajax来跨源,但是运行link script img等标签跨源.
借助script标签来解决异源问题.
我们找了个接口
https://suggest.taobao.com/sug?code=utf-8&q=%E5%9B%B4%E5%B7%BE&callback=fn
发现clallback=xx 他返回你传递给他的, 可见后端获取到了这个参数(query),然后作为一部分返回给前端
jsonp.html
jsonp//jsonp方式解决异源问题
function fn(data) {
console.log(data);
}
/getdata?callback=fn部分自己实现--nodejs实现这个接口
即实现传什么函数名,返回什么
如传fn返回fn(data), 传func,返回func(data)
app.js 我们设置函数名为maotai,返回maotai(data)
var http = require('http'), //导入http url fs模块
url = require('url'),
fs = require('fs');
s1 = http.createServer(function (req, res) {// 创建服务器
var urlObj = url.parse(req.url, true), // 接受req对象
pathname = urlObj['pathname'], // 取出req里的pathname
query = urlObj['query']; //获取参数 /getall?cb=maotai" 里的cb
// 不同的.html .css 返回时候设置http head不同的mime类型
var reg = /\.(HTML|CSS|JS|JSON|TXT|ICO)/i; //正则判断mime类型
if (reg.test(pathname)) {
var suffix = reg.exec(pathname)[1].toUpperCase();//mime统一大写比对
var suffixMIME = null;
switch (suffix) {
case "HTML":
suffixMIME = 'text/html';
break;
case "JS":
suffixMIME = 'text/javascript';
break;
case "CSS":
suffixMIME = 'text/css';
break;
case "JSON":
suffixMIME = 'application/json';
break;
case "ICO":
suffixMIME = 'application/octet-stream';
break;
}
try {
con = fs.readFileSync('.' + pathname);
res.writeHead(200, {'content-type': suffixMIME + ';charset=utf-8'});
res.end(con);
} catch (e) {
res.writeHead(404, {'content-type': 'text/plain;charset=utf-8'});
res.end("file not found")
}
}
if (pathname === "/getall") {
var fnName = query["cb"]; //获取cb=maotai
con = fs.readFileSync('./data.txt', 'utf-8');
con = 'a,b';
res.writeHead(200, {'content-type': 'application/json;charset=utf-8'});
res.end(fnName + '(' + con + ',22)'); // end即返回 maotai(a,b,22)
}
});
s1.listen(1234, function () {
console.log("http://127.0.0.1:1234/getall?cb=maotai");
});
启动nodejs服务端
实现这个接口
http://127.0.0.1:1234/getall?cb=maotai
返回结果
触发页面
var a = 12;
var b = 13;
function maotai(a,b,num) {
console.log(a,b,num);
}
访问返会结果.
[js]jquery里的jsonp实现ajax异源请求
同源请求-jquery
JS Ajax异步请求发送列表数据后面多了[]
还在苦逼的写代码,这里就不详细了,直接抛出问题: 如图所示: 前端ajax请求向后端发送数据的时候,给key添加了[]出现很多找不到原因, 后面在说 解决方法: 暂时先这样记录一下,下次方便查找,好了 ...
解决js ajax跨越请求 Access control allow origin 异常
// 解决跨越请求的问题 response.setHeader("Access-Control-Allow-Origin", "*");
js ajax设置和获取自定义header信息的方法总结
目录 1.js ajax 设置自定义header 1.1 方法一: 1.2 方法二: 2.js ajax 获取请求返回的response的header信息 3.js ajax 跨域请求的情况下获取自定 ...
随机推荐
Python导入其他文件中的.py文件 即模块
import sys sys.path.append("路径") import .py文件
MongoDB: 数据库复制
db.copyDatabase("from","to","127.0.0.1:16161"); 将127.0.0.1上的from库.拷贝到t ...
智能车学习(二)—— GPIO学习
一.概述 使用的是蓝宇的底层,主要有初始化管脚,设置管脚状态,反转管脚状态等. 二.代码重述: 1.头文件gpio.h #ifndef GPIO_H //防止重复定义(gpio_H 开头) #defi ...
CSS3新增UI样式
圆角,border-radius: 1-4个数字/1-4个数字,前面是水平,后面是垂直,不给“/”表示水平和垂直一样,举例如下:
android log 学习
一,Bug出现了, 需要“干掉”它 bug一听挺吓人的,但是只要你懂了,android里的bug是很好解决的,因为android里提供了LOG机制,具体的底层代码,以后在来分析,只要你会看bug, a ...
mybatis3:Invalid bound statement (not found)
最近在玩ssm框架搭建,突然发现最后的时候mybaits和SpringMvc进行整合的时候出现错误 Invalid bound statement (not found) 这个错误有可能出现在以下几个 ...
如何在windows下安装Python(Python入门教程)
第一步:下载Python安装包 在Python的官网 www.python.org 中找到最新版本的Python安装包,点击进行下载,请注意,当你的电脑是32位的机器,请选择32位的安装包,如果是64 ...
php 给对象动态增加属性 及子类继承父类的构造方法
<?php error_reporting(-1); ini_set('display_errors','on'); class A { public $a = 'hello'; public ...
HTML <;a>; 标签的状态和 target 属性
的四种状态 A:link 连接平常状态 A:hover 鼠标放上去的时候 A:active 鼠标按下的时候 A:visited 连接被访问过后的状态 target属性 _bla ...
【NOIP】提高组2014
Day1 T1(暴力):大水题 #include ][]={ ,,,,, ,,,,, ,,,,, ,,,,, ,,,,, }; ],b[]; int main() { in ...