ajax01
ajax01
1、ajax简介
涉及AJAX的操作页面不能用文件协议访问
使用ajax发送请求：
send参数缺省默认为null
onreadyatatechange事件在状态改变时就会触发。
.readyState 返回当前所处状态 ，有0—4 共5个状态
各数字的含义：
2-已经接受到相应报文的响应头
3-正在下载相应报文的响应体
4- 整个响应报文已经被完整下载
为了避免事件覆盖，注册事件时采用以下方法：
.getAllResponseHeaders()
获取响应头中的指定键：
.getAllResponseHeader(‘键名’)
返回所有 响应头
onload事件：不考虑兼容问题，当onload事件触发时，就是状态变为4时的情形
它是html5提供的XMLHttpRequest 2.0 version 提供的
2、XML简介：
描述数据的一种方式。例：
已被json取代
4、AJAX遵循http协议：
5、数据接口
http协议中约定报文内容时字符串。当返回有结构的数据时，采用Json格式
别人提供好的接口，我们拿来用，就不需要开发服务端了
接口像下面一样
发送get请求并传递参数：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AJAX发送GET请求并传递参数</title>
</head>
<body>
<ul id="list"></ul>
<script>
var listElement = document.getElementById('list')
// 发送请求获取列表数据呈现在页面
// =======================================
var xhr = new XMLHttpRequest()
xhr.open('GET', 'users.php')
xhr.send()
xhr.onreadystatechange = function () {
if (this.readyState !== 4) return
var data = JSON.parse(this.responseText)
// data => 数据
for (var i = 0; i < data.length; i++) {
var liElement = document.createElement('li')
liElement.innerHTML = data[i].name
liElement.id = data[i].id
listElement.appendChild(liElement)
liElement.addEventListener('click', function () {
// TODO: 通过AJAX操作获取服务端对应数据的信息
// 如何获取当前被点击元素对应的数据的ID
// console.log(this.id)
var xhr1 = new XMLHttpRequest()
xhr1.open('GET', 'users.php?id=' + this.id)
xhr1.send()
xhr1.onreadystatechange = function () {
if (this.readyState !== 4) return
var obj = JSON.parse(this.responseText)
alert(obj.age)
}
})
}
}
// 给每一个 li 注册点击事件
// 因为 li 后来动态创建，所以不能这样注册事件
// for (var i = 0; i < listElement.children.length; i++) {
// listElement.children[i].addEventListener('click', function () {
// console.log(111)
// })
// }
// var xhr = new XMLHttpRequest()
// // 这里任然是使用URL中的问号参数传递数据
// xhr.open('GET', 'users.php?id=2')
// xhr.send(null)
// xhr.onreadystatechange = function () {
// if (this.readyState !== 4) return
// console.log(this.responseText)
// }
</script>
</body>
</html>
发送POST请求：不刷新页面直接提交用户名及密码
js的模板字符串可以解析变量
在用POST发送请求时,如果请求体是urlencoded格式，要先设置请求头：
xhr.setRequestHeader(‘Content-Type’,‘application/x-www-form-urlencoded’)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AJAX发送POST请求</title>
<style>
#loading {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #555;
opacity: .5;
text-align: center;
line-height: 300px;
}
#loading::after {
content: '加载中...';
color : #fff;
}
</style>
</head>
<body>
<div id="loading"></div>
<table border="1">
<tr>
<td>用户名</td>
<td><input type="text" id="username"></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" id="password"></td>
</tr>
<tr>
<td></td>
<td><button id="btn">登录</button></td>
</tr>
</table>
<script>
// 找一个合适的时机，做一件合适的事情
var btn = document.getElementById('btn')
// 1. 获取界面上的元素 value
var txtUsername = document.getElementById('username')
var txtPassword = document.getElementById('password')
var loading = document.getElementById('loading')
btn.onclick = function () {
loading.style.display = 'block'
var username = txtUsername.value
var password = txtPassword.value
// 2. 通过 XHR 发送一个 POST 请求
var xhr = new XMLHttpRequest()
xhr.open('POST', 'login.php')
// !!! 一定注意 如果请求体是 urlencoded 格式 必须设置这个请求头 ！！！
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
// xhr.send('username=' + username + '&password=' + password)
xhr.send(`username=${username}&password=${password}`)
// 3. 根据服务端的反馈 作出界面提示
xhr.onreadystatechange = function () {
if (this.readyState !== 4) return
console.log(this.responseText)
loading.style.display = 'none'
}
}
</script>
</body>
</html>
5、同步模式和异步模式
默认异步：
js中计时函数：
console.time(‘秒表名’)//开始一个秒表
console.timeEnd(‘秒表名’)//结束一个秒表
不使用同步模式
同步模式注册事件
send()会等到请求响应的过程全部完成才会继续
所以要注意事件注册的时机，必须在send()之前
六、相应数据的格式：
1）XML
浏览器默认以Html进行解析，必须设置header
接收xml的响应
取元素：
服务端应该设置一个合理的Content-Type
七、如何处理服务端响应的数据
使用国内模板引擎：ART-TEMPLATE
八、chrome中控制台展开被打印对象时会访问即使的数据
九、线程与进程：
1）进程：进行中的程序
2）线程
ajax01的更多相关文章
- Ajax01 什么是ajax、获取ajax对象、ajax对象的属性和方法
1 什么是ajax ajax是一种用来改善用户体验的技术,其本质是利用浏览器提供的一个对象(XMLHttpRequest,也可称之为ajax对象) 向服务器发送异步请求;服务器返回部分数据(不是一个完 ...
- Ajax01 什么是ajax、获取ajax对象、ajax对象的属性和方法、编程步骤、缓存问题、乱码问题
目录 1 什么是ajax 2 获取ajax对象 3 ajax对象的属性和方法 4 使用ajax的编程步骤 5 缓存问题 6 乱码问题 1 什么是ajax ajax是一种用来改善用户体验的技术,其本质是 ...
- AJAX-----01远古时期的ajax
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Ajax-01 Ajax概述
Web应用程序: 用户浏览器发送请求,服务端接收并处理请求,然后返回结果,往往返回就是字符串(HTML).浏览器将字符串(HTML)渲染并显示到浏览器上. 传统的Web应用: 一个简单操作(每个请求) ...
- ajax01简介
(Asynchronous JavaScript and XML)Ajax :异步 JavaScript 和 XML,一种允许浏览器和服务器通信进行少量数据交换而无需重新加载整个网页,以实现更新部分网 ...
- 007商城项目：商品列表查询-需求分析,以及Spinmvc的访问知识
我们之前已经整合了ssm框架并且调试已经好了,接下来我们实现商品列表的查询. 我们先进入到首页: 方法如下: 我们看到我们把所有的jsp页面都是放在: 这些页面都是放在WEB-IN下面的,也就是说这些 ...
- .NET运用AJAX 总结及其实例
1.AJAX简介 (1.没有AJAX会怎么样?普通的ASP.Net每次执行服务端方法的时候都要刷新当前页面,比如实现显示服务器的时间.每次都要刷新页面的坏处:页面刷新打断用户操作.速度慢.增加服务器的 ...
- Ajax详解及其案例分析------如何获得Ajax对象，使用Ajax对象发送GET和POST请求，校验用户名，POST和GET请求时的乱码处理，实现级联的下拉列表
本节主要内容预览: 1 获得Ajax对象 2 使用Ajax对象发送GET请求 3 使用Ajax对象发送POST请求 4 使用Ajax校验用户名 5 POST请求时的乱码处理 6 GET请求时的乱码处理 ...
- Ajax以及类似百度搜索框的demo
public class Ajax01 extends HttpServlet{ @Override protected void service(HttpServletRequest request ...
随机推荐
- mysql中cast() 和convert()的用法讲解
一.在mysql操作中我们经常需要对数据进行类型转换.此时我们应该使用的是cast()或convert(). 二.两者的对比 相同点:都是进行数据类型转换,实现的功能基本等同 不同点:两者的语法不同, ...
- python全栈开发day92-day96 Vue总结
-- ES6常用语法 -- var let const -- 模板字符串 -- 反引号 -- ${} -- 箭头函数 -- 普通函数取决于函数最近的调用者 -- 箭头函数取决当前环境 -- 类 -- ...
- zabbix通过shell脚本安装异常问题定位
htxk-106主机信息现象如下: 通过zabbix_get命令 zabbix_get [7189]: Check access restrictions in Zabbix agent config ...
- .netcore加入APM系统 SkyWalking
安装环境:windows 2016 必要条件: JDK8+ Elasticsearch 5.x(注:目前不支持es6) 8080,10800,11800,12800 端口不被占用 下载skywalki ...
- Kafka-API
ctrl+Hnew 它的实现类ctrl+r替换格式化ctrl+alt+l ctrl+fctrl+alt+v 替换 < " < < > > Ka ...
- day 42 mycql 数据类型
关于性别字段的存储数据类型选用 -- 性别字段 create table actor2 (id int not null auto_increment primary key,name char(32 ...
- Node.js实现网络编程
http://www.cnblogs.com/myzhibie/p/4579122.html
- springcloud(六)：配置中心git示例
随着线上项目变的日益庞大,每个项目都散落着各种配置文件,如果采用分布式的开发模式,需要的配置文件随着服务增加而不断增多.某一个基础服务信息变更,都会引起一系列的更新和重启,运维苦不堪言也容易出错.配置 ...
- DevOps: CLM, RLM, RPM, RPD, BSA, BAA, BMA - WOW!
1. BMC Release Lifecycle Management (RLM) is our suite targeted at managing and automating applicati ...
- Redis自学笔记:3.4入门-列表类型
3.4列表类型 3.4.1介绍 列表类型可以存储一个有序的字符串列表,常用的操作是向列表两端添加元素,或者 获得列表的某一片段. 优点:内部使用的是双向链表,所以向列表两端添加元素的时间复杂度为O(1 ...