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深入理解的更多相关文章

  1. Ajax初步理解

    最近在项目中经常会使用Ajax技术,用法上倒是熟练了,但是只知其然,不知其所以然,抽时间读了读JavaScript高级程序设计中关于Ajax的介绍有了些初步的理解,在此总结一下. 什么是Ajax Aj ...

  2. Ajax的理解

    初学JS,一直认为Ajax是个很高级的.不可亵玩的东西.这两天怀着忐忑的心情接触了一下它, 感觉它并没有想象中的那么难理解. 其实,Ajax就是浏览器端向服务器请求资源的一个对象(方法). 就跟打电话 ...

  3. ajax的理解和运用

    AJAX : Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. 譬 ...

  4. 面试时怎样回答:你对原生ajax的理解

    很多人跟我一样用习惯了jq封装好的$.ajax,但是面试时,原生ajax是很多面试官喜欢问的问题,今天再查资料,打算好好整理一下自己理解的原生ajax. 首先,jq的ajax:一般我常用的参数就是这些 ...

  5. 有关ajax的理解;

    jQuery是JavaScript封装的一个库,里面封装了一些便于我们使用的方法,同时还有$.ajax()的一些理解需要我们更加深入了解 ajax简介: 实现后台与前台交互的功能或方法就叫做ajax: ...

  6. input屏蔽历史记录 ;function($,undefined) 前面的分号是什么用处 JSON 和 JSONP 两兄弟 document.body.scrollTop与document.documentElement.scrollTop兼容 URL中的# 网站性能优化 前端必知的ajax 简单理解同步与异步 那些年,我们被耍过的bug——has

    input屏蔽历史记录   设置input的扩展属性autocomplete 为off即可 ;function($,undefined) 前面的分号是什么用处   ;(function($){$.ex ...

  7. ajax的理解与工作流程

    一.什么是ajax ajax是一种异步通信技术.在ajax出现之前,客户端与服务端之间直接通信.引入ajax之后,客户端与服务端加了一个第三者--ajax.有了ajax之后,通过在后台与服务器进行少量 ...

  8. $Ajax简单理解

    关于web开发的可能我们不能或缺的利器就是$Ajax,我们这里就不具体的将里面的原理(如果大家有时间的话可以好好的看看javascript里面的权威指南)里面讲的比较详细了 这里就在不说了.今天我们就 ...

  9. 对Ajax的理解

    一.Ajax的工作原理: 1. Ajax的机制是:完成异步请求,实现页面的局部刷新. 2. 发送异步请求:通过xmlhttprequest方法. 3. 浏览器向服务器发送异步请求: 服务器接收处理请求 ...

  10. 系统前端基本文件+ajax部分理解

    静态页面: 一.static: css dist fonts images js model 二.templates: html ajax搜索操作: <html> <head> ...

随机推荐

  1. svn服务器搭建与迁移

    2016-11-21更新: 今天被svn的钩子搞了半天,网上找解决方法都无效,下午被我试出来了,特此记录. 在svn的钩子中可以使用update来更新配置文件,比如ansible的,puppet的,具 ...

  2. Java数据库操作类演示

    只在mysql上测试过,不知道算不算好使​1. [代码][Java]代码     package org.load.demo; import java.io.IOException;import ja ...

  3. HDU - 1054 Strategic Game(二分图最小点覆盖/树形dp)

    d.一颗树,选最少的点覆盖所有边 s. 1.可以转成二分图的最小点覆盖来做.不过转换后要把匹配数除以2,这个待细看. 2.也可以用树形dp c.匈牙利算法(邻接表,用vector实现): /* 用ST ...

  4. POJ - 1236 Network of Schools(有向图的强连通分量)

    d.各学校之间有单向的网络,每个学校得到一套软件后,可以通过单向网络向周边的学校传输, 问题1:初始至少需要向多少个学校发放软件,使得网络内所有的学校最终都能得到软件. 问题2:至少需要添加几条传输线 ...

  5. 格式化磁盘,提示 is apparently in use by the system

    一般是被mdadm占用着. 使用  cat /proc/mdstat 查看所有 找到欲格式化盘符号. 使用 mdadm --stop /dev/md0 mdadm --remove /dev/md0 ...

  6. java中的泛型类和泛型方法

    1.泛型是什么? 泛型(Generic type 或者 generics)是对 Java 语言的类型系统的一种扩展,以支持创建可以按类型进行参数化的类. 可以在集合框架(Collection fram ...

  7. async-await系列翻译(一)

    本篇翻译的英文链接:https://docs.microsoft.com/en-us/dotnet/articles/standard/async-in-depth 使用.NET的基于任务的异步编程模 ...

  8. MYSQL数据库学习----MYSQL数据类型

    一切数据在计算中都是以二进制形式存储,而8位二进制数就表示1个字节. 通常我们说一种数据类型占多少字节,就是说这种数据类型可以表示多少位的二进制数,同时二进制数可以转换为十进制数,进而得到这种数据类型 ...

  9. 让ie支持css3的一些htc文件

    1. Dean Edwards的IE7.js (以及 IE8.js, IE9.js)这个玩意估计是试图让IE支持CSS3属性的鼻祖,还算蛮强大,就是性能开销较大,要解析很多文件脚本,给DOM添加大量的 ...

  10. Native App、Web App 还是Hybrid App?(转)

    一.什么是Native App? Native App即原生应用,即我们一般所称的客户端,是针对不同手机系统单独开发的本地应用,如需使用需要先下载到手机并安装,下载Native App的最常见方法是访 ...