JS_Ajax基础
一:Ajax
ajax 的全称是Asynchronous(异步) JavaScript and XML
在不刷新页面的情况下从服务器获取，提交数据的一种数据交互方式;
二：Ajax使用步骤概括
//1：创建Ajax对象
var xhr;
//浏览器兼容问题解决
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
//或者 var xhr = window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject('Microsoft XMLHTTP');
//2：配置 Ajax请求地址
xhr.open('get','index.xml',true);
//3：发送请求
xhr.send();
//4:接收服务器返回数据
xhr.onreadysatechange=function(){
if(xhr.readySates==4&&xhr.status==200)
console.log(xhr.responsetXML)
}
三：Ajax使用步骤分析：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax</title>
<script>
//网络数据请求工具 ，数据类型一般有：(json|xml)
//如何拿：创建对象+配置方法open+send请求发送给服务器
//监听数据状态， onreadystatechange 判断状态，服务器默认get请求|若用POST请求出错500，请求方式由服务器来定，
//一:创建Ajax对象
// 1.1定义变量，用来保存创建出的对象，(XMLHttpRequest);
var xhr;
//1.2：根据浏览器支持标准。创建对象。
//判断当前浏览器是否具备XMLHttpRequest
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
//IE5|6|7 使用ActiveXobject创建
//Ajax组件放在ActiveXObject组件库中，需传入'Miscrosoft.XMLHTTTP'才能返回Ajax组件
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
//二：配置Ajax请求地址
// ======================post请求=====================================
//配置请求信息
//open三个参数()
//1:设置请求方式get|post
//2:设置请求数据的接口地址
//3:设置请求是否是异步请求(异步请求:请求发送后，不等待请求数据，先执行其他任务，当数据达到本地在处理) 默认是：true为异步
// xhr.open('post','index.html',true);
// post请求参数问题，把post请求所需的参数，放到send()中
// 若其参数有中文字符，将其转码为unicode并拼接如下
// xhr.send('user=lemon&password=23');
// xhr.send('user='+encodeURI('中文')+'password=23');
//POST请求参数中有中文，都要使用encodeURI进行转码
//POST参数放置问题 需要将参数丢掷send中
//GET参数send参数为null send() 为了所有服务器能正确识别，传值为null
//===========================get请求=============================
//若有参数拼接到url中，多个数据之间使用&&连接
//缓存规避
//get请求中：若每次请求为同一个接口，浏览器将从缓存中取数据，而不是服务器；如果服务器中接口数据内容改变，则就拿不到新数据。
所以在请求接口后拼接一个随机数参数，这样浏览器每次拿到接口在缓存中都找不到这个接口对应数据，这样就会从服务器中读取数据，
而服务器端并没有开设接收随机数参数的字段，所以get发送过来的随机数将被服务器丢弃，只能返回处理的接口数据；
// xhr.open('get','myX.ML.xml'+Math.random(),true);
xhr.open('get','myJSON.json',true);
//三：发送数据
xhr.send(null);//严谨写法null
//四:监听数据传输情况
//如何判断数据有没有到达：
//readySate值改变执行，
xhr.onreadystatechange = function(){
if(xhr.readyState==4&&xhr.status==200){
//只有当readyState的值是4且status值是200，服务器数据才算发送到本地
//数据请求成功
//若数据是xml格式，数据返回保存到responseXML属性中，否则responseText;
//请求数据是xml传输的时候，responseText把这些数据转化为字符串，但responseXML会把这些数据当成xml文档对象，再解析成字符串更方便；
//若数据请求为json格式，respinseText会把数据转换成json字符串,responseXML并不会受到这些数据为null
console.log(xhr.responseText);//json 收
console.log(xhr.responseXML);//xml 收
}
}
</script>
</head>
<body>
</body>
</html>
四：同源策略
所谓同源是指域名（主机名或者IP地址）、端口、协议相同。
不同的客户端脚本（JavaScript、ActionScript）在没明确授权的情况下，不能读取对方的资源。
同源策略：保护用户策略，比如：在建行中设置的信息，若想拿到缓存信息， 只能用同源网页进行访问。
Ajax只能访问同源接口
同源策略限制范围：
1：本地缓存Cookie/localStorage/indexDB数据
2：不能互相访问dom节点 | 通过第一个js代码操作另一个html代码，同一家厂商生产，可以自定义修改，无安全隐患。
3：ajax请求不能发送 | 保护自己公司数据
同源判断：
URL 协议：主机名：端口 三者相同，才称之为同源；
结果 原因
http://store.company.com/dir2/other.html 成功
http://store.company.com/dir/inner/another.html 成功
https://store.company.com/secure.html 失败 协议不同
http://store.company.com:81/dir/etc.html 失败 端口不同
http://news.company.com/dir/other.html 失败 主机名不同五：jsonp
在Ajax打破同源的限制
跨域
//jsonp；利用script标签请求外服务器中数据，从而绕开同源策略对AJAX请求数据限制
//一：创建javascript标签
var script = document.createElement('script');
script.type="text/javascript";
script.src="http://10.0.159.198/news.php?callback=foo";//传回调函数
document.getElementsByTagName('body')[0].appendChild(script);//写进文档流
//二：写回调函数
function foo(s){
alert(s);
}六：综合示例：使用Ajax加载天气信息练习:
//Ajax.js
//ajax封装
//传入参数：请求方式|请求接口地址|请求参数|请求成功回调函数|请求失败回调函数
function createAjax(method, url, data, successFun, failFun) {
//1:根据浏览器支持情况创建
var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
//2:判断请求方式类型
if(method.toUpperCase() == "GET") {
//2.1请求为get时，配置请求参数，并发送
xhr.open('GET', url + "?" + data, true);
xhr.send(null);
} else if(method.toUpperCase() == "POST") {
xhr.open('POST', url, true);
xhr.send(data);
} else {
console.errr("error");
return;
}
//3：监听
xhr.onreadystatechange = function() {
if(xhr.readyState == "4" && xhr.status == "200") {
successFun(xhr.responseText);
} else if(xhr.readyState == "4") {
failFun('error');
}
}
}
//jsonp封装
function createJsonp(srcString){
//封装好的JSONP 只能对接GET服务器
var script = document.createElement("script");
script.type="text/javascript";
script.src=srcString;
document.getElementsByTagName("head")[0].appendChild(script);
}
//weather.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>weather_ajax</title>
<script type="text/javascript" src="Ajax.js"></script>
<script type="text/javascript">
var murl = 'http://wthrcdn.etouch.cn/weather_mini';
var data = "city=原阳";
//调用封装好的ajax;
createAjax('get', murl, data, successFun, failFun);
function successFun(d) {
console.log(d);
}
function failFun(d) {
console.log(d);
}
//调用封装好的jsonp
var strString="http://wthrcdn.etouch.cn/weather_mini?city=原阳&&callback=myfoo";
createJsonp(strString);
function myfoo(d){
console.log(d);
}
</script>
</head>
<body>
</body>
</html>对象式Ajax封装
//ajax.js
function ajaxFun(obj) {
var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
var upperMethod = obj.method.toUpperCase();
if(upperMethod == "GET") {
xhr.open("GET", obj.url + "?" + obj.data, true);
xhr.send(null);
} else if(upperMethod == "POST") {
xhr.open("POST", obj.url, true);
xhr.send(obj.data);
} else {
console.error("method error!");
return;
}
xhr.onreadystatechange = function() {
if(xhr.readyState == 4) {
if(xhr.status == 200) {
obj.successFun(xhr.responseText);
} else {
obj.failFun('error');
}
}
}
}//html中调用
var obj={
method:"GET",
url:"http://wthrcdn.etouch.cn/weather_mini",
data:"city=北京",
successFun:function(d){
console.log(d);
},
failFun:function(d){
console.log(d);
}
};
ajaxFun(obj);JS_Ajax基础的更多相关文章
- java基础集合经典训练题
第一题:要求产生10个随机的字符串,每一个字符串互相不重复,每一个字符串中组成的字符(a-zA-Z0-9)也不相同,每个字符串长度为10; 分析:*1.看到这个题目,或许你脑海中会想到很多方法,比如判 ...
- node-webkit 环境搭建与基础demo
首先去github上面下载(地址),具体更具自己的系统,我的是windows,这里只给出windows的做法 下载windows x64版本 下载之后解压,得到以下东西 为了方便,我们直接在这个目录中 ...
- js学习笔记：webpack基础入门（一）
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- Golang， 以17个简短代码片段，切底弄懂 channel 基础
(原创出处为本博客:http://www.cnblogs.com/linguanh/) 前序: 因为打算自己搞个基于Golang的IM服务器,所以复习了下之前一直没怎么使用的协程.管道等高并发编程知识 ...
- [C#] C# 基础回顾 - 匿名方法
C# 基础回顾 - 匿名方法 目录 简介 匿名方法的参数使用范围 委托示例 简介 在 C# 2.0 之前的版本中,我们创建委托的唯一形式 -- 命名方法. 而 C# 2.0 -- 引进了匿名方法,在 ...
- HTTPS 互联网世界的安全基础
近一年公司在努力推进全站的 HTTPS 化,作为负责应用系统的我们,在配合这个趋势的过程中,顺便也就想去搞清楚 HTTP 后面的这个 S 到底是个什么含义?有什么作用?带来了哪些影响?毕竟以前也就只是 ...
- Swift与C#的基础语法比较
背景: 这两天不小心看了一下Swift的基础语法,感觉既然看了,还是写一下笔记,留个痕迹~ 总体而言,感觉Swift是一种前后端多种语言混合的产物~~~ 做为一名.NET阵营人士,少少多多总喜欢通过对 ...
- .NetCore MVC中的路由（1）路由配置基础
.NetCore MVC中的路由(1)路由配置基础 0x00 路由在MVC中起到的作用 前段时间一直忙于别的事情,终于搞定了继续学习.NetCore.这次学习的主题是MVC中的路由.路由是所有MVC框 ...
- .NET基础拾遗（5）多线程开发基础
Index : (1)类型语法.内存管理和垃圾回收基础 (2)面向对象的实现和异常的处理基础 (3)字符串.集合与流 (4)委托.事件.反射与特性 (5)多线程开发基础 (6)ADO.NET与数据库开 ...
随机推荐
- SQL保留关键字不能用作表名
com.microsoft.sqlserver.jdbc.SQLServerException: 关键字 'User' 附近有语法错误. 一看就是SQL语句错误,发现控制台console上打印出来的S ...
- [ERROR] Fatal error: Can't open and lock privilege tables: Table 'mysql.host' doesn't exist
mysql 启动总是报错: 错误日志中显示: [ERROR] Fatal error: Can't open and lock privilege tables: Table 'mysql.host' ...
- wpf中button的无边框实现
设置button的样式为:Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}";即可
- [vb.net]最简单的邮件发送
Imports Microsoft.Office.Interop.Outlook Private Sub sendMail() Dim outObj As New Application Dim it ...
- 水果项目第1集-想法>需求->功能->数据库设计->类设计
懒,懒人,我是个懒人. 懒人想做点事,总是拖拖拉拉,迟迟没有开始. 很久很久以前,就想做属于自己的产品,但是至今还没有一个属于自己的产品. 两年前,终于想好,要做一个网上卖水果的系统,手机上点点,水果 ...
- POJ 3468 A Simple Problem with Integers (线段树)
题意:给定两种操作,一种是区间都加上一个数,另一个查询区间和. 析:水题,线段树. 代码如下: #pragma comment(linker, "/STACK:1024000000,1024 ...
- CSS定位之position详解(转载)
本文转载于xingoo的博文:http://www.cnblogs.com/xing901022/p/5193751.html position属性 在前端中,position是很常见的属性.通过这 ...
- 第三天：DOM EventListener 句柄的添加和移除
1.事件句柄的包含如下两个方法: ps:使用句柄的好处是,修改方法的名称时,不需要改变多处 1.添加一个句柄, 2.添加多个句柄不会覆盖,运行结果:点击“按钮”,弹出框hello,确定后,自动弹出框w ...
- AutoMapper中的Map和DynamicMap——高手注重细节,思考和总结
近日在做项目的时候,遇到了个怪问题,关于AutoMapper的细节问题,也是不为一般人所关注的. 本人研究AutoMapper也没有多长时间,而且研究的过程中也写了关于AutoMapper的系列基础教 ...
- NABCD需求分析
1. N 需求 如今的社会,每个公司每个人都有大量的信息需要处理.保管和查询,这就难免会有些信息在个人电脑中保存的位置被遗忘,需要一款简单并且实用的搜索引擎来搜索个人 所需求的信息. 2. A ...