创建一个learnDemo
首先 先开启一个小型服务器
node.js环境下执行：
http-server
创建：ajax.html.
<!DOCTYPE html>
<html>
<head>
<title>ajax</title>
<script type="text/javascript">
window.onload = function (){
var bBtn = document.getElementById("btn");
}
</script>
</head>
<body>
<button type="button" value="Hello-Button" id="btn">Hello-Button</button>
</body>
</html>
准备一个静态文件 hello.txt里面输入一些内容保存。
可以通过地址 http://localhost:8080/hello.txt 直接访问hello.txt文件的内容
如图：
现在不用浏览器获取内容，用ajax获取hello.txt文件里的内容
通过点击按钮的时候获取：
oBtn.onclick = function () {
var xhr = new XMLHttpRequest(); // 打开浏览器
xhr.open('get','hello.txt',true); //在地址栏输入地址
xhr.send();// 提交
xhr.onreadystatechange = function () {// 等待服务器返回内容
if(xhr.readyState == 4){
console.log(xhr.responseText);
}
}
}
点击按钮，发现控制台打印出hello.txt的内容
想通过ajax完成一个数据交互工作，首先要先创建一个ajax对象，对象名称就是：XMLHttpRequest.
创建 XMLHttpRequest 对象
所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。
创建 XMLHttpRequest 对象的语法：
variable=new XMLHttpRequest();
老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：
variable=new ActiveXObject("Microsoft.XMLHTTP");
为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ,ActiveXObject只是一个插件
var xmlhttp;
if (window.XMLHttpRequest)。//不要漏掉window
{
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
}
else
{
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
下面说说try catch 话不多说看代码：
try{
// 代码尝试执行这块中的内容，如果有错误，则会执行catch，并且会传入错误信息参数
}catch(e){}
如果不用try catch 调用不存在的变量，会报错，而且影响后续代码的执行
创建对象也可以用下面方式
try{
xhr = new XMLHttpRequest();
} catch (e) {
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
open方法
参数：
1，打开方式
2，地址
3，是否异步
异步：非阻塞模式，前面的代码不会影响后面代码的执行。true异步
同步：阻塞模式 前面的代码会影响后面代码的执行。false 同步
首先了解一下表单：数据的提交
action : 数据提交的地址,默认是当前页面
method：数据提交的方式，默认是get 方式
1. get // 把数据名称和数据值用=连接，如果有多个的话，那么它会把多个数据组合用&进行连接，然后把数据放到url？后面传到指定页面
url长度限制，不要通过get方式传递过多的数据
2,post
理论上没有限制，
enctype :数据的格式，默认：application/x-www.form-urlencoded
后续的代码需要用到前面的内容时，用false，（很少用同步）
返回的内容
readyState :Ajax 工作状态
responseText:ajax请求返回的内容被存放到这个属性下面
onreadystatechange:当ready state改变的时候触发
status:服务器状态http 状态码。
send(要发送的数据post和get区别)：发送请求
-
-
-
- 中文编码get乱码 （encodeURI）post 中文没问题
- 缓存get (后面连接一个随机数，时间戳) post 没有缓存文字
- POST：setRequestHeader(类型, 内容)：设置请求头（表单有默认值application/x-www-form-urlencoded）post 必须设置请求头
// post 方式，数据放在send（）里面作为参数传递 - "Content-Type","application/x-www-form-urlencoded”
-
-