<script type="text/javascript">//请求函数function f1(){console.log('start');//1.创建AJAX对象var ajax = new XMLHttpRequest();//4.给AJAX设置事件(这里最多感知4[1-4]个状态)
        ajax.onreadystatechange = function(){//5.获取响应//responseText        以字符串的形式接收服务器返回的信息//console.log(ajax.readyState);if(ajax.readyState == 4 && ajax.status == 200){var msg = ajax.responseText;console.log(msg);//alert(msg);var divtag = document.getElementById('result');divtag.innerHTML = msg;}}//2.创建http请求,并设置请求地址var username = document.getElementsByTagName('input')[0].value;var email = document.getElementsByTagName('input')[1].value;username = encodeURIComponent(username);    //对输入的特殊符号(&,=等)进行编码
        email = encodeURIComponent(email);ajax.open('get','response.php?username='+username+'&email='+email);//3.发送请求(get--null    post--数据)
        ajax.send(null);}</script>

<script type="text/javascript">//请求函数function f1(){//console.log('start');//1.创建AJAX对象var ajax = new XMLHttpRequest();//4.给AJAX设置事件(这里最多感知4[1-4]个状态)
        ajax.onreadystatechange = function(){//5.获取响应//responseText        以字符串的形式接收服务器返回的信息//console.log(ajax.readyState);if(ajax.readyState == 4 && ajax.status == 200){var msg = ajax.responseText;console.log(msg);//alert(msg);var divtag = document.getElementById('result');divtag.innerHTML = msg;}}//2.创建http请求,并设置请求地址
        ajax.open('post','response.php');//post方式传递数据是模仿form表单传递给服务器的,要设置header头协议
        ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");//3.发送请求(get--null    post--数据)var username = document.getElementsByTagName('input')[0].value;var email = document.getElementsByTagName('input')[1].value;username = encodeURIComponent(username);    //对输入的特殊符号(&,=等)进行编码
        email = encodeURIComponent(email);var info = 'username='+username+'&email='+email;    //将请求信息组成请求字符串
        ajax.send(info);}</script>

XMLHttpRequest 是一个浏览器接口，使得 Javascript 可以进行 HTTP (S) 通信。最早，微软在 IE 5 引进了这个接口。因为它太有用，其他浏览器也模仿部署了，ajax 操作因此得以诞生。但是，这个接口一直没有标准化，每家浏览器的实现或多或少有点不同。HTML 5 的概念形成后，W3C 开始考虑标准化这个接口。2008年 2 月，就提出了 XMLHttpRequest Level 2 草案。这个 XMLHttpRequest 的新版本，提出了很多有用的新功能，将大大推动互联网革新。本文就对这个新版本进行详细介绍。

//步骤一:创建异步对象
var ajax = new XMLHttpRequest();
//步骤二:设置请求的url参数,参数一是请求的类型,参数二是请求的url,可以带参数,动态的传递参数starName到服务端
ajax.open('get','getStar.php?starName='+name);
//步骤三:发送请求
ajax.send();
//步骤四:注册事件 onreadystatechange 状态改变就会调用
ajax.onreadystatechange = function () {if (ajax.readyState==4 &&ajax.status==200) {//步骤五 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的console.log(ajax.responseText);//输入相应的内容}
}

//创建异步对象
var xhr = new XMLHttpRequest();
//设置请求的类型及url
//post请求一定要添加请求头才行不然会报错
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");xhr.open('post', '02.post.php' );
//发送请求
xhr.send('name=fox&age=18');
xhr.onreadystatechange = function () {// 这步为判断服务器是否正确响应if (xhr.readyState == 4 && xhr.status == 200) {console.log(xhr.responseText);}
};

function ajax_method(url,data,method,success) {// 异步对象var ajax = new XMLHttpRequest();// get 跟post  需要分别写不同的代码if (method=='get') {// get请求if (data) {// 如果有值url+='?';url+=data;}else{}// 设置 方法 以及 url
        ajax.open(method,url);// send即可
        ajax.send();}else{// post请求// post请求 url 是不需要改变
        ajax.open(method,url);// 需要设置请求报文ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");// 判断data send发送数据if (data) {// 如果有值 从send发送
            ajax.send(data);}else{// 木有值 直接发送即可
            ajax.send();}}// 注册事件ajax.onreadystatechange = function () {// 在事件中 获取数据 并修改界面显示if (ajax.readyState==4&&ajax.status==200) {// console.log(ajax.responseText);// 将 数据 让 外面可以使用// return ajax.responseText;// 当 onreadystatechange 调用时 说明 数据回来了// ajax.responseText;// 如果说 外面可以传入一个 function 作为参数 success
            success(ajax.responseText);}}}

fetch('https://davidwalsh.name/demo/arsenal.json').then(function(response) { // 转换为 JSONreturn response.json();
}).then(function(j) {// 现在, `j` 是一个 JavaScript object
    console.log(j);
});

fetch('/next/page').then(function(response) {return response.text();}).then(function(text) { // <!DOCTYPE ....
    console.log(text); });

fetch('flowers.jpg').then(function(response) {return response.blob();}).then(function(imageBlob) {document.querySelector('img').src = URL.createObjectURL(imageBlob);});

fetch('/submit', {method: 'post',body: new FormData(document.getElementById('comment-form'))
});

fetch('/submit-json', {method: 'post',body: JSON.stringify({email: document.getElementById('email').valueanswer: document.getElementById('answer').value})
});