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 ...
随机推荐
- Windows 7 64bit VS2015 配置CUDA
1. 更新驱动 下载系统显卡驱动,首先在设备管理器中查看自己的显卡型号,我的是GeForce GTX 960,然后在官网下载对应的驱动程序并安装. 官网网址:NVIDIA 驱动程序下载 2. 安装 ...
- 如何扩展Orchard
翻译自: http://msdn.microsoft.com/en-us/magazine/hh708754.aspx 动态类型系统 Content item是Orchard中的原子, 比如b ...
- JMeter性能测试，验证请求数据的准确性（wc命令）
wc: 该命令统计给定文件中的字节数.字数.行数.如果没有给出文件名,则从标准输入读取. wc同时也给出所有指定文件的总统计数.字是由空格字符区分开的最大字符串. - c 统计字节数. - l 统计行 ...
- RocketMQ 启动停止命令
1.rocketmq的启动 进入rocketMQ解压目录下的bin文件夹 启动namesrv服务:nohup sh bin/mqnamesrv & 日志目录:{rocketMQ解压目录} ...
- php图文合成文字居中(png图片合成)
header('Content-type:text/html;charset=utf-8'); /** * png图文合成 by wangzhaobo * @param string $pic_pat ...
- LoadRunner之IP欺骗
一.启动IP欺骗,弹出提示窗口: 二.将本机改为静态IP: 1.查看当前的IP相关信息: 2.更改IP: 三.正式设置模拟IP号段: 1.重复步骤一,会弹出如下弹窗,选择第二项并下一步: ...
- day65 request对象,以及方法,response对象,render,redirect
这里的都是我们会频繁使用到的,用得多了自然就会了,我们写项目都是少不了这些用法的,所以这就把老师的博客粘过来就好了, Request对象 官方文档 属性 所有的属性应该被认为是只读的,除非另有说明. ...
- 日志组件slf4j介绍及配置详解
http://blog.csdn.net/foreverling/article/details/51385128
- (转)thymeleaf中的判断总结
判断String字符串,添加引号 th:class="${flag=='forum.html'}?'active'" 判断boolean类型,注意不能当成字符串处理,不能添加引号 ...
- SVM：利用SVM算法实现手写图片识别(数据集50000张图片)—Jason niu
import mnist_loader # Third-party libraries from sklearn import svm def svm_baseline(): training_dat ...