基础概念

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——异步基础知识（一）的更多相关文章

  1. Ajax——异步基础知识（三）

    封装异步请求 1.将函数作为参数进行使用 2.因为获取数据是在一个注册事件中获取的,所以只有事件触发的时候才会调用此函数 <!DOCTYPE html> <html lang=&qu ...

  2. Ajax——异步基础知识（二）

    XML数据格式 首行必须是版本号和格式等信息 <?xml version="1.0" encoding="utf-8" ?> 最外层需要一个根节点进 ...

  3. Ajax相关基础知识总结

    URL:统一资源定位符 网络的七层协议:网卡 驱动  网络层(ip)  传输层(tcp udp) 会话层( )  应用层(http.) restful表征状态转移(一种表征架构) CURD 增删改查 ...

  4. Comet——反向Ajax （基础知识）

    Comet:服务器推送,与ajax页面向服务器请求数据相反.几乎可以实时将数据推送到客户端. 但本质一样:浏览器向服务器发起请求,服务器响应请求 Comet实现方式:长轮询.HTTP流 1.长轮询—— ...

  5. Ajax——php基础知识（一）

    AMP环境 AMP(Apache.MySQL.PHP)是三个独立的软件,但是对于初学者而言分别安装以及配置需要掌握一定的软件知识,所以就有了很多AMP集成环境帮助我们简化安装 ——WAMP WAMP安 ...

  6. Ajax——php基础知识（三）

    上传文件 1.get是传不了文件的,只能用post 2.enctype需要重新设置,默认是application/x-www-form-urlencoded,会在发送到服务器之前,所有字符都会进行编码 ...

  7. Ajax——php基础知识（二）

    header header('content-type:text/html; charset= utf-8');//设置编码格式为:utf-8 header('location:http://www. ...

  8. 11月10日上午ajax基础知识、用ajax做登录页面、用ajax验证用户名是否可用、ajax动态调用数据库

    1.ajax的基础知识 ajax是结合了jquery.php等几种技术延伸出来的综合运用的技术,不是新的内容.ajax也是写在<script>标签里面的. 如果使用ajax一定是要有1个处 ...

  9. ajax基础知识、用ajax做登录页面、用ajax验证用户名是否可用、ajax动态调用数据库

    1.ajax的基础知识 ajax是结合了jquery.php等几种技术延伸出来的综合运用的技术,不是新的内容.ajax也是写在<script>标签里面的. 如果使用ajax一定是要有1个处 ...

随机推荐

  1. C++ - new delete 高维数组小结

    借鉴:http://www.cnblogs.com/beyondstorm/archive/2008/08/26/1276278.html http://www.cnblogs.com/platero ...

  2. 在Myeclipse中拷贝一个web项目，但是tomcat文件夹中没有更新，需要进行修改才能更新。

    1.在Myeclipse中拷贝一个web项目,但是tocat文件夹中没有更新,需要进行修改才能更新. 2.方法:右键这个工程,然后Properties->MyEclipse->Projec ...

  3. js有块级作用域么？

    //js私有作用域,js没有块级作用域 function Box(){ for(var i=0;i<5;i++){} console.log(i);//5,如果js有块级作用域,那么i在for循 ...

  4. squid配置透明代理

    搞了半个月的squid普通代理和透明代理最终差点儿相同了!! squid配置透明代理主要有两步.见图: 第一个基本的步骤:设置client默认网关,让默认网关指向squid代理server water ...

  5. HTTPS那些事 用java实现HTTPS工作原理

    HTTPS那些事 用java实现HTTPS工作原理 博客分类: java历险   今天被问到关于https原理的问题,结果由于知识掌握不牢靠,停留于表面,很多细节都无法回答清楚,于是决定把https的 ...

  6. 去哪网实习总结：开发定时任务（JavaWeb）

    本来是以做数据挖掘的目的进去哪网的,结构却成了系统开发.. . 只是还是比較认真的做了三个月,老师非常认同我的工作态度和成果.. . 实习立即就要结束了.总结一下几点之前没有注意过的变成习惯和问题,分 ...

  7. Intellij热部署插件JRebel使用方法（转载）

    Intellij热部署插件JRebel帮助开发者在项目处于运行状态下任意修改Java文件并动态反馈到运行的项目中.插件官方下载地址:https://plugins.jetbrains.com/plug ...

  8. react 使用

    我的有道云笔记 React 事件: 1.不能使用 return false; 来阻止元素的默认行为.需要在方法的最前面使用 e.preventDefault() 来阻止元素的默认行为(例如:a 标签的 ...

  9. shell curl 实现rest 并发测试

    for i in {1..50}; do curl http://10.43.95.26:5812/rdk/service/app/example/server/my_service & do ...

  10. 洛谷P1193 洛谷团队训练VS传统团队训练

    题目背景 "在中学的信息学教育领域,洛谷无疑是一个相当受欢迎的辅助网站.同时有百余所学校正在通过洛谷进行信息学竞赛(以后简称OI)的教育.洛谷之所以如此受欢迎,是因为洛谷创新的将OI教育的几 ...