Ajax——异步基础知识（一）
基础概念
1、异步请求可以做到偷偷向服务器发送请求，而页面却不刷新
2、get异步请求传递参数是通过url追加键值对的方式
3、post异步请求比较特殊，需要设置请求的类型
User-Agent：浏览器的具体类型 如：User-Agent：Mozilla/5.0 (Windows NT 6.1; rv:17.0) Gecko/ Firefox/17.0 Accept：浏览器支持哪些数据类型 如：Accept: text/html,application/xhtml+xml,application/xml;q=0.9; Accept-Charset：浏览器采用的是哪种编码 如：Accept-Charset: ISO-- Accept-Encoding：浏览器支持解码的数据压缩格式 如：Accept-Encoding: gzip, deflate Accept-Language：浏览器的语言环境 如：Accept-Language zh-cn,zh;q=0.8,en-us;q=0.5,en;q=0.3 Host：请求的主机名，允许多个域名同处一个IP地址，即虚拟主机。Host:www.baidu.com Connection：表示是否需要持久连接。Keep-Alive/close，HTTP1.1默认是持久连接，它可以利用持久连接的优点，当页面包含多个元素时（例如Applet，图片），显著地减少下载所需要的时间。要实现这一点，Servlet需要在应答中发送一个Content-Length头，最简单的实现方法是：先把内容写入ByteArrayOutputStream，然后在正式写出内容之前计算它的大小。如：Connection: Keep-Alive Content-Length：表示请求消息正文的长度。对于POST请求来说Content-Length必须出现。 Content-Type：WEB服务器告诉浏览器自己响应的对象的类型和字符集。例如：Content-Type: text/html; charset='gb2312' Content-Encoding：WEB服务器表明自己使用了什么压缩方法（gzip，deflate）压缩响应中的对象。例如：Content-Encoding：gzip Content-Language：WEB服务器告诉浏览器自己响应的对象的语言。 Cookie：最常用的请求头，浏览器每次都会将cookie发送到服务器上，允许服务器在客户端存储少量数据。 Referer：包含一个URL，用户从该URL代表的页面出发访问当前请求的页面。服务器能知道你是从哪个页面过来的。Referer: http://www.baidu.com/
readyState：存有 XMLHttpRequest 的状态。从 0 到 4 发生变化
: 请求未初始化
: 服务器连接已建立
: 请求已接收
: 请求处理中
: 请求已完成，且响应已就绪
status：200: "OK"；404: 未找到页面
get异步请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button>发送异步请求</button>
<br>
<input type="text">
<script>
var btn = document.getElementsByTagName("button")[0];
var inp = document.getElementsByTagName("input")[0];
btn.onclick = function () {
var ajax = new XMLHttpRequest();//创建异步对象
ajax.open('get', '01.php');//请求方法，参数1请求类型，参数2请求地址
ajax.send();//发送请求
//注册事件，有数据返回才会触发事件
ajax.onreadystatechange = function (ev) {
if (ajax.readyState == 4 && ajax.status == 200) {
inp.value = ajax.responseText;
} else {
console.log("失败");
}
}
}
</script>
</body>
</html>
post异步请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button>发送异步请求</button>
<br>
<input type="text">
<input type="text">
<script>
var btn = document.getElementsByTagName("button")[0];
var inp1 = document.getElementsByTagName("input")[0];
var inp2 = document.getElementsByTagName("input")[1];
btn.onclick = function () {
var ajax = new XMLHttpRequest();
ajax.open('post', '02.php');
//如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据：
ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
ajax.send('name=jack&age=13');//发送参数
ajax.onreadystatechange = function (ev) {
if (ajax.readyState == 4 && ajax.status == 200) {
var msg = ajax.responseText;
var arr=msg.split('|');//分割字符串
inp1.value = arr[0];
inp2.value = arr[1];
}
}
}
</script>
</body>
</html>
Ajax——异步基础知识（一）的更多相关文章
- Ajax——异步基础知识（三）
封装异步请求 1.将函数作为参数进行使用 2.因为获取数据是在一个注册事件中获取的,所以只有事件触发的时候才会调用此函数 <!DOCTYPE html> <html lang=&qu ...
- Ajax——异步基础知识（二）
XML数据格式 首行必须是版本号和格式等信息 <?xml version="1.0" encoding="utf-8" ?> 最外层需要一个根节点进 ...
- Ajax相关基础知识总结
URL:统一资源定位符 网络的七层协议:网卡 驱动 网络层(ip) 传输层(tcp udp) 会话层( ) 应用层(http.) restful表征状态转移(一种表征架构) CURD 增删改查 ...
- Comet——反向Ajax （基础知识）
Comet:服务器推送,与ajax页面向服务器请求数据相反.几乎可以实时将数据推送到客户端. 但本质一样:浏览器向服务器发起请求,服务器响应请求 Comet实现方式:长轮询.HTTP流 1.长轮询—— ...
- Ajax——php基础知识（一）
AMP环境 AMP(Apache.MySQL.PHP)是三个独立的软件,但是对于初学者而言分别安装以及配置需要掌握一定的软件知识,所以就有了很多AMP集成环境帮助我们简化安装 ——WAMP WAMP安 ...
- Ajax——php基础知识（三）
上传文件 1.get是传不了文件的,只能用post 2.enctype需要重新设置,默认是application/x-www-form-urlencoded,会在发送到服务器之前,所有字符都会进行编码 ...
- Ajax——php基础知识（二）
header header('content-type:text/html; charset= utf-8');//设置编码格式为:utf-8 header('location:http://www. ...
- 11月10日上午ajax基础知识、用ajax做登录页面、用ajax验证用户名是否可用、ajax动态调用数据库
1.ajax的基础知识 ajax是结合了jquery.php等几种技术延伸出来的综合运用的技术,不是新的内容.ajax也是写在<script>标签里面的. 如果使用ajax一定是要有1个处 ...
- ajax基础知识、用ajax做登录页面、用ajax验证用户名是否可用、ajax动态调用数据库
1.ajax的基础知识 ajax是结合了jquery.php等几种技术延伸出来的综合运用的技术,不是新的内容.ajax也是写在<script>标签里面的. 如果使用ajax一定是要有1个处 ...
随机推荐
- 武大OJ 612. Catch the sheep
Description Old Sama is a great and powerful magician in the word. One day, a little girl, Anny, tou ...
- Linux基本命令总结(初学者可以借鉴学习)
Linux基本常用命令 个人在平时项目中用到的一些常规命令总结下 删除文件夹命令:rm -rf 目录名字 添加模式:按i 退出编辑模式:ese左上角键 首先先按esc退出进入一个模式然后再输入wq或者 ...
- PHP array_merge()
定义和用法 array_merge() 函数把两个或多个数组合并为一个数组. 如果键名有重复,该键的键值为最后一个键名对应的值(后面的覆盖前面的).如果数组是数字索引的,则键名会以连续方式重新索引. ...
- C# 运行CMD命令
/// <summary> /// 运行CMD命令 /// </summary> /// <param name="cmd">命令</pa ...
- OCX 打包 CAB 与 JS 调用具体教程
近期在做一个 WEB 项目.须要调用 OCX 进行连接读卡器读卡.本来并不想用 OCX 技术.由于 ActiveX 技术是微软出品.这样就导致整个系统仅仅能使用 IE 浏览器(其它浏览器能够通 ...
- 京东电商API
大家好~~2016年了~转眼过去三年了...一年没有更新博客了.. ..在上一年里,遇到了几个好哥们,一起写程序一起装逼,以下给大家讲述一下工作上遇到的技术问题,由于这个我開始弄的时候也比較麻烦,不知 ...
- sqlite 数据库 相关知识
一基本简单介绍 SQLite 是一个自持的(self-contained).无server的.零配置的.事务型的关系型数据库引擎.由于他非常小,所以也能够作为嵌入式数据库内建在你的应用程序中. SQL ...
- VFL语言简洁
一.VFL语言简洁 VFL(Visual format language)语言是苹果为了简化手写Autolayout代码所创建的专门负责编写约束的代码.为我们简化了许多代码量. 二.使用步骤 使用步骤 ...
- C++之内部类（内部类就是外部类的友元类，单向友元。只是内部类比友元类多了一点权限）
1. 内部类的概念 如果一个类定义在另一个类的内部,这个内部类就叫做内部类.注意此时这个内部类是一个独立的类,它不属于外部类,更不能通过外部类的对象去调用内部类.外部类对内部类没有任何优越的访问权限. ...
- ios12--简易购物车
Assets.xcassets图片是拖到右边里面去的. // // ViewController.m // 03-综合练习 // #import "ViewController.h" ...