Ajax深入理解
Ajax Asynchronous JavaScript and XML 异步的JavaScript和XML
ajax通过与后台服务器进行少量的数据交换,ajax可以使页面实现异步更新,即不需要重新加载整个页面
1.创建XMLHttpRequest对象
所有现代浏览器
var xhr = new XMLhttpRequest();
老版本的 ie
var xhr = new ActiveXObect("Micrsoft.XMLHTTP");
2.向服务器发送请求
xhr.open(method,url,async) //method 可选 GET / POST
//url 文件在服务器上的位置
//async true(异步),false(同步)
xhr.send(string) //仅适用于POST请求 将请求发送到服务器
GET与POST优缺点
1. post可以发送更多的内容
2. get明确的query有利于链接分享
3. post的请求不能进行缓存
简单的GET请求 ajax是在服务器端的请求 所以本地模拟一个
我使用的是node 切换到本地对应目录
$ npm install --global http-server //node包管理工具下载
$ http-server //运行http-server
服务器挂起了
html
<span>你好</span>
<button onclick="lodMessage()">change</button>
js
var lodMessage = () => {
console.log('发送请求');
var xhr = new XMLHttpRequest();
console.log(xhr.readyState);
xhr.onreadystatechange = function () {
console.log(xhr.readyState);
console.log(xhr.status);
if (xhr.readyState == 4 && xhr.status <=200 && xhr.status <= 300 || xhr == 304) {
document.getElementsByTagName('span')[0].innerHTML = xhr.responseText;
} }
xhr.open('GET', 'http://127.0.0.1:8080/demo.php', true);
xhr.send();
}
demo.php
<?php
echo 'changed';
?>
这样打开本地的 localhost:8080/01-get.html 即可 点击按钮 就可以显示在 demo.php里面请求回来的数据
点击前
点击后
当我改变demo.php里的内容
<?php
echo 'changedededededed';
?>
再次刷新页面后再次点击 button 发送请求 期望得到改变后的demo.php的值
然而并没有的到更新后的数据 (这种情况 不是每次都会碰到 , 但是的确碰到了)
这是因为 两次请求,浏览器将数据缓存下来了
解决办法 (让请求不一样) //缓存可以在服务器端进行配置 Last-Modified
改变 xhr.open 给url加一个唯一的id
这样 浏览器就不会使用缓存的数据
GET时传一些数据
POST请求
更换open方法的method
xhr.open('POST','http://127.0.0.1:8080/demo.php',true)
添加请求头规定想要发送的数据类型
xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded')
http的content-type还有好多种 http://tool.oschina.net/commons
send方法中添加数据
xhr.send('name=weibin&age=12');
xhr.status与xhr.readyState的值以及其意义
//xhr.status
1** 消息
2** 访问成功
3** 重定向 301永久重定向 302临时重定向 304重定向到磁盘(缓存)
4** 客户端错误
500 服务端错误
502 错误的访问
503 服务器不可用
6++ 自行拓展
//xhr.readyState 0 请求未初始化
1 服务器链接简历
2 发送send请求
3 内容下载
4 完成
ajax 默认是不能请求跨域的资源的
请求跨域资源的方法 关于jsonp (基本用不到)
http默认是允许跨域访问的,而我们不能访问是因为浏览器的限制,例如简单的get、post方法使用curl中执行就是可以得。
可以通过修改http的请求头中 white-head、content-type、method 等参数 实现多种ajax方法、头、内容的跨域访问。
ajax2.0 上传文件
ajax2.0 可以支持上传fromData对象,
experss结合原生ajax实现文件拖拽上传,进度条demo
https://www.cnblogs.com/96weibin/p/12169016.html
Ajax深入理解的更多相关文章
- Ajax初步理解
最近在项目中经常会使用Ajax技术,用法上倒是熟练了,但是只知其然,不知其所以然,抽时间读了读JavaScript高级程序设计中关于Ajax的介绍有了些初步的理解,在此总结一下. 什么是Ajax Aj ...
- Ajax的理解
初学JS,一直认为Ajax是个很高级的.不可亵玩的东西.这两天怀着忐忑的心情接触了一下它, 感觉它并没有想象中的那么难理解. 其实,Ajax就是浏览器端向服务器请求资源的一个对象(方法). 就跟打电话 ...
- ajax的理解和运用
AJAX : Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. 譬 ...
- 面试时怎样回答:你对原生ajax的理解
很多人跟我一样用习惯了jq封装好的$.ajax,但是面试时,原生ajax是很多面试官喜欢问的问题,今天再查资料,打算好好整理一下自己理解的原生ajax. 首先,jq的ajax:一般我常用的参数就是这些 ...
- 有关ajax的理解;
jQuery是JavaScript封装的一个库,里面封装了一些便于我们使用的方法,同时还有$.ajax()的一些理解需要我们更加深入了解 ajax简介: 实现后台与前台交互的功能或方法就叫做ajax: ...
- input屏蔽历史记录 ;function($,undefined) 前面的分号是什么用处 JSON 和 JSONP 两兄弟 document.body.scrollTop与document.documentElement.scrollTop兼容 URL中的# 网站性能优化 前端必知的ajax 简单理解同步与异步 那些年,我们被耍过的bug——has
input屏蔽历史记录 设置input的扩展属性autocomplete 为off即可 ;function($,undefined) 前面的分号是什么用处 ;(function($){$.ex ...
- ajax的理解与工作流程
一.什么是ajax ajax是一种异步通信技术.在ajax出现之前,客户端与服务端之间直接通信.引入ajax之后,客户端与服务端加了一个第三者--ajax.有了ajax之后,通过在后台与服务器进行少量 ...
- $Ajax简单理解
关于web开发的可能我们不能或缺的利器就是$Ajax,我们这里就不具体的将里面的原理(如果大家有时间的话可以好好的看看javascript里面的权威指南)里面讲的比较详细了 这里就在不说了.今天我们就 ...
- 对Ajax的理解
一.Ajax的工作原理: 1. Ajax的机制是:完成异步请求,实现页面的局部刷新. 2. 发送异步请求:通过xmlhttprequest方法. 3. 浏览器向服务器发送异步请求: 服务器接收处理请求 ...
- 系统前端基本文件+ajax部分理解
静态页面: 一.static: css dist fonts images js model 二.templates: html ajax搜索操作: <html> <head> ...
随机推荐
- svn服务器搭建与迁移
2016-11-21更新: 今天被svn的钩子搞了半天,网上找解决方法都无效,下午被我试出来了,特此记录. 在svn的钩子中可以使用update来更新配置文件,比如ansible的,puppet的,具 ...
- Java数据库操作类演示
只在mysql上测试过,不知道算不算好使1. [代码][Java]代码 package org.load.demo; import java.io.IOException;import ja ...
- HDU - 1054 Strategic Game(二分图最小点覆盖/树形dp)
d.一颗树,选最少的点覆盖所有边 s. 1.可以转成二分图的最小点覆盖来做.不过转换后要把匹配数除以2,这个待细看. 2.也可以用树形dp c.匈牙利算法(邻接表,用vector实现): /* 用ST ...
- POJ - 1236 Network of Schools(有向图的强连通分量)
d.各学校之间有单向的网络,每个学校得到一套软件后,可以通过单向网络向周边的学校传输, 问题1:初始至少需要向多少个学校发放软件,使得网络内所有的学校最终都能得到软件. 问题2:至少需要添加几条传输线 ...
- 格式化磁盘,提示 is apparently in use by the system
一般是被mdadm占用着. 使用 cat /proc/mdstat 查看所有 找到欲格式化盘符号. 使用 mdadm --stop /dev/md0 mdadm --remove /dev/md0 ...
- java中的泛型类和泛型方法
1.泛型是什么? 泛型(Generic type 或者 generics)是对 Java 语言的类型系统的一种扩展,以支持创建可以按类型进行参数化的类. 可以在集合框架(Collection fram ...
- async-await系列翻译(一)
本篇翻译的英文链接:https://docs.microsoft.com/en-us/dotnet/articles/standard/async-in-depth 使用.NET的基于任务的异步编程模 ...
- MYSQL数据库学习----MYSQL数据类型
一切数据在计算中都是以二进制形式存储,而8位二进制数就表示1个字节. 通常我们说一种数据类型占多少字节,就是说这种数据类型可以表示多少位的二进制数,同时二进制数可以转换为十进制数,进而得到这种数据类型 ...
- 让ie支持css3的一些htc文件
1. Dean Edwards的IE7.js (以及 IE8.js, IE9.js)这个玩意估计是试图让IE支持CSS3属性的鼻祖,还算蛮强大,就是性能开销较大,要解析很多文件脚本,给DOM添加大量的 ...
- Native App、Web App 还是Hybrid App?(转)
一.什么是Native App? Native App即原生应用,即我们一般所称的客户端,是针对不同手机系统单独开发的本地应用,如需使用需要先下载到手机并安装,下载Native App的最常见方法是访 ...