这里描述的问题是,jQuery使用Ajax的json和jsonp来实现不跨域和跨域获取资源,我所遇到的问题,几经周折,费了我不少时间。将这些问题总结如下
json获取本地域下的数据遇到的问题
这里用的是配置了的ajax服务器环境,网上可以搜到配置教程。打开了服务器之后,他会在服务器配置文件下查找index.html文件,然后服务器就链接到这个文件上。
在网上查找了很多办法都不管用,最后经过修改jQuery文件的路径得到了解决办法,有一下两种:
- 把放在根目录下或其他目录的jQuery文件,放在你执行的index.html文件的目录下,在输入服务器地址就可以了,我的index.html文件是放在了安装node.js服务器所产生的文件目录下。
- 不更改原来jQuery文件目录,在vscode里打开这个index.html文件
注:这两种方式地址的端口不一样,服务器的是3000,vscode打开的是5500,我觉得这可能就是导致错误的原因,原因是jQuery文件存放在5500端口下,在3000找不到。这是我个人认为的原因
如果有哪位大佬能看到这,麻烦看一下我这理解对不对,有问题还望提出修改。
jsonp跨域获取资源遇到的问题
jsonp获取跨域资源可以不用ajax服务器环境
1. 填写的获取获取资源的地址一定要是能够返回数据的
我在做获取联想词这个例子是,就是由于地址写错了,返回了一个不是jsonp格式的空数据,然后就被浏览器该拦截了。如下图
刚开始以为是chrome浏览器的CORB机制不支持跨域获取资源,然后我就找了各种办法,将浏览器的CORB机制去掉,其中有个说是复制chrome快捷方式然后改变属性的办法可以用,只不过要记得把属性里的只读勾选去掉就行了,具体方法网上可以搜到,不做详细讲解了。
解除CORB后我再查看获取的资源,返回的是一个json的空资源。这就是这个问题的根本所在了。以下是返回的数据图:
2. 请求成功了,却弹出请求失败的回调函数
其实我的这个问题就是由上面问题导致的,由于数据被浏览器拦截,然后就执行了失败的回调函数。
还有注意传给服务器的数据data格式一定要对,不同的资源地址,格式可能不一样
我在做获取联想词时,分别用了360和百度的搜索地址,360的关键字传参是’word=a’,百度的是’wd=a’这种格式,类似这种的传数据一定要注意key值。