ajax详细介绍
a.什么是Ajax
Asynchronous JavaScript and XML（异步JavaScript和XML)
节省用户操作，时间，提高用户体验，减少数据请求
传输获取数据
b.使用Ajax：
使用ajax获取某一文本文件的内容
c.Ajax过程详解：
创建对象XMLHttpRequest()
Date()对象
ActiveXObject(‘Microsoft.XMLHTTP’)
1.例：
<script>
window.onload = function() {
var oBtn = document.getElementById('btn');
oBtn.onclick = function() {
//打开浏览器
var xhr = new XMLHttpRequest();
//在地址栏输入地址
xhr.open('get','1.txt',true);
//提交
xhr.send();
//等待服务器返回内容
xhr.onreadystatechange = function() {
if ( xhr.readyState == 4 ) {
alert( xhr.responseText );
}
}
}
}
</script>
<body>
<input type="button" value="按钮" id="btn" />
</body>
2.异常
<script>
//alert(a);
try {
//代码尝试执行这个块中的内容,如果有错误，则会执行catch{}， 并且传入错误信息参数
//alert(a);
//new throw();
//throw new Error('错了错了');
} catch (e) {
alert(e);
}
alert('到这里了');
</script>
3.异步同步
①<script src="jquery.js"></script>
<script>
//$(function(){}) //阻塞 -> 同步
//阻塞：当前面一件事没做完的情况下，阻塞后面代码的执行
/*setTimeout(function() {
alert(1); //非阻塞 - 异步
}, 2000); //非阻塞：先弹出2,2s后再弹出1
alert(2);*/
4.请求状态监控
onreadystatechange事件
readyState属性：请求状态
0 （初始化）还没有调用open()方法
1 （载入）已调用send()方法，正在发送请求
2 （载入完成）send()方法完成，已收到全部响应内容
3 （解析）正在解析响应内容
4 （完成）响应内容解析完成，可以在客户端调用了
status属性：服务器(请求资源)的状态
返回的内容
responseText：返回以文本形式存放的内容
responseXML：返回XML形式的内容
window.onload = function() {
var oBtn = document.getElementById('btn');
oBtn.onclick = function() {
（一）//打开浏览器
/*
1.创建一个ajax对象
ie6以下new ActiveXObject('Microsoft.XMLHTTP')
*/
var xhr = null;
/*if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}*/
try {
xhr = new XMLHttpRequest();
} catch (e) {
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
（二）//在地址栏输入地址
/*
open方法
三个参数含义：
1.打开方式 Form-method
2.地址 Form-action
3.是否异步
异步(true):非阻塞--> 前面的代码不会影响后面代码的执行
同步(false):阻塞--> 前面的代码会影响后面代码的执行
同步与异步区别：同步：当后续的代码需要用到前面东西的时候，可以用到同步，
同步模式用的较少，因为可以通过事件回调的形式进行处理
异步：一般情况下，均使用异步，因为不可能为了完成ajax动作，
而把后续代码全部阻止掉
*/ //打开方式：get;地址：1.txt;是否异步：异步-->xhr.open('get','1.txt',true);
xhr.open('get','1.txt',true);
(三)//提交 发送请求
//Send方法
发送数据请求，相当于Form的submit
//alert(1);
xhr.send();
//alert(1)
//alert( xhr.responseText );
（四）//等待服务器返回内容
/*
readyState : ajax工作状态
responseText（属性） : ajax请求返回的内容就被存放到这个属性下面
on readystate change : 当状态值readyState改变的时候触发
status : 服务器状态（码），http状态码
*/
xhr.onreadystatechange = function() {
if ( xhr.readyState == 4 ) { //当状态值为4时，把内容取出来
//容错？？处理：判断服务器是否成功 2开头的表示成功
if ( xhr.status == 200 ) {//当状态值OK的时候 执行
alert( xhr.responseText );//把内容取出来
} else {//如果为其他的状态 做一下错误处理，xhr.status：表示错误信息
alert('出错了,Err：' + xhr.status);
}
}
}
}
</script>
</head>
<body>
<input type="button" value="按钮" id="btn" />
</body>
</script>
传递、请求过程中的问题：
xhr.open('post','2.post.php',true);
//post方式，数据放在send()里面作为参数传递
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');//申明发送的数据类型
//post没有缓存问题
//无需编码
xhr.send('username=刘伟&age=30');
获取内容以后应注意的问题：
4.1，表单
表单：数据的提交,向服务器提交数据，比如：提交用户信息
action : 数据提交的地址，默认是当前页面
method : 数据提交的方式，默认是get方式
1.get--通过url地址传输
把数据名称和数据值用=连接，如果有多个的话，那么他会把多个数据组合用&进行连接，然后把数据放到url?后面传到指定页面
传输的数据量：有限制，url长度限制的原因，我们不要通过get方式传递过多的数据
传递的数据类型：仅为字符串
2.post--通过浏览器内部传输
传输的数据量：理论上无限制
传递的数据类型：可多种
enctype : 提交的数据格式，默认application/x-www-form-urlencoded
①<body>
<form action="1.get.php" enctype="application/x-www-form-urlencoded">
<input type="text" name="username" />
<input type="text" name="age" />
<input type="submit" value="提交" />
</form>
</body>
4.2，后端数据接收
前后台键名和传输方式必须一致
数据传输方式
数据获取方式
①后端数据接收--get-$_GET方式 （.php 文件）
通过URL传递给该脚本的变量的数组
<?php
header('content-type:text/html;charset="utf-8"');
error_reporting(0);
$username = $_GET['username'];
$age = $_GET['age'];
echo "你的名字：{$username}，年龄：{$age}";
②<form action="1.post.php" method="post">
<input type="text" name="username" />
<input type="text" name="age" />
<input type="submit" value="提交" />
</form>
②后端数据接收--post-$_POST 方式 （.php 文件）
通过HTTP POST方法（表单）传递给该脚本的变量的数组
<?php
header('content-type:text/html;charset="utf-8"');
error_reporting(0);
//$_REQUEST----get post 都可以
$username = $_POST['username'];
$age = $_POST['age'];
echo "你的名字：{$username}，年龄：{$age}";
5.json
<script src="JSON.js"></script>
<script>
/*
JSON :
JSON.js文件中有两种方法：
stringify : 可以把一个对象转成对应字符串
parse : 可以把字符串转成对应对象
*/
//alert(JSON)
//stringify : 可以把一个对象转成对应字符串
var arr = [1,2,3];
var j = {left:100};
/*alert( JSON.stringify(arr) );*/
/*alert( JSON.stringify(j) );*/
//parse : 可以把字符串转成对应对象
var s1 = '[100,200,300]';
var a1 = JSON.parse(s1);
//alert(a1[0])
var s2 = '{"left":100}';
var a2 = JSON.parse(s2);
alert(a2.left)
</script>
6.ajax就是拿数据，从接口上取数据，把取到的数据根据不同特性，进行处理
xhr.onreadystatechange = function() {
if ( xhr.readyState == 4 ) {
if ( xhr.status == 200 ) {
//alert( xhr.responseText );
var data = JSON.parse( xhr.responseText );//转换
var oUl = document.getElementById('ul1');//获取
var html = '';//创建HTML
//循环当前的数组
for (var i=0; i<data.length; i++) {
html += '<li><a href="">'+data[i].title+'</a> [<span>'+data[i].date+'</span>]</li>';
}
oUl.innerHTML = html;//添加后放到oUl.innerHTML里
} else {
alert('出错了,Err：' + xhr.status);
}
//从接口上取数据，把取到的数据根据不同特性，进行处理
//ajax就是拿数据
}
}
6.get方式两个问题
/*
1.缓存 在url？后面连接一个随机数，时间戳
2.乱码 编码encodeURI
*/ //动态文件
原：xhr.open('get','1.txt',true);
改：xhr.open('get','2.get.php?username='+encodeURI('刘伟')+'&age=30&' + new Date().getTime(),true);
-->: + new Date().getTime() 表示后面连接一个随机数，时间戳，可以使数据实时更新
-->: '2.get.php?username='+encodeURI('刘伟')+'&age=30&' 将乱码进行URL编码，表示将汉字转为字符串输出
7.post方式四个问题
1.数据放在那？
2.发送的数据类型？
xhr.open('post','2.post.php',true);
//post方式，数据放在send()里面作为参数传递 setRequestHeader表示设置请求头，告诉后端发送过去的文档类型是什么
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');//申明发送的数据类型
3.post没有缓存问题
4.无需编码
xhr.send('username=刘伟&age=30');//数据放在send()里面作为参数传递
8.完整案例
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>
window.onload = function() {
var oBtn = document.getElementById('btn');
oBtn.onclick = function() {
var xhr = null;
try {
xhr = new XMLHttpRequest();
} catch (e) {
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
/*
xhr.open('get','2.get.php?username='+encodeURI('刘伟')+'&age=30&' + new Date().getTime(),true);
xhr.send();
xhr.onreadystatechange = function() {
if ( xhr.readyState == 4 ) {
if ( xhr.status == 200 ) {
alert( xhr.responseText );
} else {
alert('出错了,Err：' + xhr.status);
}
}
}
}
}
</script>
</head>
<body>
<input type="button" value="按钮" id="btn" />
</body>
</html>
ajax详细介绍的更多相关文章
- JQuery中的AJAX参数详细介绍
Jquery中AJAX参数详细介绍 参数名 类型 描述 url String (默认: 当前页地址) 发送请求的地址. type String (默认: "GET") 请求方 ...
- ThinkPHP页面跳转、Ajax技巧详细介绍（十八）
原文:ThinkPHP页面跳转.Ajax技巧详细介绍(十八) ThinkPHP页面跳转.Ajax技巧详细介绍 一.页面跳转 $this->success('查询成功',U('User/test' ...
- jquery和ajax的关系详细介绍【转】
jquery和ajax的关系详细介绍 http://www.jb51.net/article/43965.htm
- 柯南君：看大数据时代下的IT架构（2）消息队列之RabbitMQ-基础概念详细介绍
一.基础概念详细介绍 1.引言 你是否遇到过两个(多个)系统间需要通过定时任务来同步某些数据?你是否在为异构系统的不同进程间相互调用.通讯的问题而苦恼.挣扎?如果是,那么恭喜你,消息服务让你可以很轻松 ...
- JavaScript FormData的详细介绍及使用
本文转自:https://blog.csdn.net/liupeifeng3514/article/details/78988001 FormData的详细介绍及使用请点击此处,那里对FormData ...
- js event 冒泡和捕获事件详细介绍【转】
冒泡和捕获 冒泡: 事件从内向外,从下向上执行 (默认行为) 捕获: 事件从外向内,从上向下执行 vue之capture 捕获事件 capture.html <!DOCTYPE html> ...
- 【spring boot】11.spring-data-jpa的详细介绍和复杂使用
==================================================================================================== ...
- RabbitMQ学习总结（1）——基础概念详细介绍
一.基础概念详细介绍 1.引言 你是否遇到过两个(多个)系统间需要通过定时任务来同步某些数据?你是否在为异构系统的不同进程间相互调用.通讯的问题而苦恼.挣扎?如果是,那么恭喜你,消息服务让你可以很轻松 ...
- Django对中间件的调用思想、csrf中间件详细介绍、Django settings源码剖析、Django的Auth模块
目录 使用Django对中间件的调用思想完成自己的功能 功能要求 importlib模块介绍 功能的实现 csrf中间件详细介绍 跨站请求伪造 Django csrf中间件 form表单 ajax c ...
随机推荐
- 阿里巴巴分布式服务框架dubbo学习笔记
Dubbo是什么? Dubbo是一个分布式服务框架,致力于提供高性能和透明化的RPC远程服务调用方案,以及SOA服务治理方案.简单的说,dubbo就是个服务框架,如果没有分布式的需求,其实是不需要用的 ...
- 深入理解javascript原型和闭包（13）-【作用域】和【上下文环境】
上文简单介绍了作用域,本文把作用域和上下文环境结合起来说一下,会理解的更深一些. 如上图,我们在上文中已经介绍了,除了全局作用域之外,每个函数都会创建自己的作用域,作用域在函数定义时就已经确定了.而不 ...
- 使用行为树(Behavior Tree)实现游戏AI
——————————————————————— 谈到游戏AI,很明显智能体拥有的知识条目越多,便显得更智能,但维护庞大数量的知识条目是个噩梦:使用有限状态机(FSM),分层有限状态机(HFSM),决策 ...
- PHP读写大“二进制”文件，不必申请很大内存（fopen、fread、fwrite、fclose）
<?php /** * 读写大二进制文件,不必申请很大内存 * 只有读取到内容才创建文件 * 保证目录可写 * * @param string $srcPath 源文件路径 * @param s ...
- redis中的key设置过期时间
EXPIRE key seconds 为给定 key 设置生存时间,当 key 过期时(生存时间为 0 ),它会被自动删除. 在 Redis 中,带有生存时间的 key 被称为『易失的 ...
- Scrum Meeting ——总结
冲刺总结 0*.燃尽图 迟来的燃尽图,别看它是最后一天掉了一堆,感觉很假,像是人为的把issues都关闭掉.其实不然,很多功能是大家平时做好,但是没整合在一起,所以没燃掉,在最后几天的整合中,通过测试 ...
- 家庭路由器设置以及win10链接无线不显示登录密码 直接提示链接出错问题解决
家庭路由器设置 网线插入WAN口,用网客户端接在LAN口,就是路由器模式 LAN→WAN设置:电脑→第二个路由器LAN→进入设置界面: 网络参数→WAN口设置→WAN口连接类型→动态IP→保存. 网络 ...
- ASP.NET MVC中的两个Action之间值的传递--TempData
一. ASP.NET MVC中的TempData 在ASP.NET MVC框架的ControllerBase中存在一个叫做TempData的Property,它的类型为TempDataDictiona ...
- 【krpano】krpano xml资源解密（破解）软件说明与下载（v1.2）
欢迎加入qq群551278936讨论krpano技术以及获取最新软件. 该软件已经不再维护,现在已经被KRPano资源分析工具取代,详情参见 http://www.cnblogs.com/reac ...
- hmm
http://www.cnblogs.com/mindpuzzle/p/3653043.html http://en.wikipedia.org/wiki/Viterbi_algorithm http ...