标签：function Axios xmlhttp 请求 true ajax send Ajax 交互

Ajax

• 异步的 JavaScript 和 XML（Asynchronous JavaScript and XML），不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
• 用XMLHttpRequest 对象和服务器交换数据。
• 创建对象

var xmlhttp=new XMLHttpRequest();
var xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");// IE6, IE5

get

xmlhttp.open("GET","/try/ajax/demo_get.php",true);
xmlhttp.send();

//向 URL 添加一个唯一的 ID，避免缓存
xmlhttp.open("GET","/try/ajax/demo_get.php?t=" + Math.random(),true); 
xmlhttp.send();

//通过 GET 向 URL 方法发送信息
xmlhttp.open("GET","/try/ajax/demo_get2.php?fname=Henry&lname=Ford",true);
xmlhttp.send();

post

xmlhttp.open("POST","/try/ajax/demo_post.php",true);
xmlhttp.send();

// 像 HTML 表单那样 POST 数据，用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定发送的数据
xmlhttp.open("POST","/try/ajax/demo_post2.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");

onreadystatechange 事件：基于响应的任务，当 readyState 等于 4 且状态为 200 时，表示响应已就绪

xmlhttp.onreadystatechange=function()
{
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
  {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
  }
}
// responseText：字符串形式响应数据
// responseXML： XML形式相应数据
// readyState:存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中  4:请求已完成，且响应已就绪

AJAX JSON 实例

function loadXMLDoc()
{
  var xmlhttp;
  if (window.XMLHttpRequest)
  {
    // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xmlhttp=new XMLHttpRequest();
  }
  else
  {
    // IE6, IE5 浏览器执行代码
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function()
  {
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
      var myArr = JSON.parse(this.responseText);
      myFunction(myArr)
    }
  }
  xmlhttp.open("GET","/try/ajax/json_ajax.json",true);
  xmlhttp.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
  xmlhttp.send();
}
function myFunction(arr) {
  var out = "";
  var i;
  for(i = 0; i < arr.length; i++) {
    out += '<a href="' + arr[i].url + '">' + 
    arr[i].title + '</a><br>';
  }
 document.getElementById("myDiv").innerHTML=out;
}

// 发送 JSON 数据：
xmlhttp.send(JSON.stringify({ "email": "admin@runoob.com", "response": { "name": "runoob" } }));

ajax()方法/ jQuery

• 语法

$.ajax({name:value, name:value, ... })

• 例

# 使用AJAX请求改变<div>元素的文本

$("button").click(function(){
    $.ajax({
        url:"demo_test.txt",
        success:function(result){$("#div1").html(result);
    }});
});

Axios

• Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。需要安装下载。

特性

• 从浏览器中创建 XMLHttpRequests
• 从 node.js 创建 http 请求
• 支持 Promise API
• 拦截请求和响应/转换请求数据和响应数据/取消请求
• 自动转换 JSON 数据
• 客户端支持防御 XSRF

get

// 为给定 ID 的 user 创建请求
axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

// 上面的请求也可以这样做
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

post

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
  
// 多个并发
function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    // 两个请求现在都执行完成
  }));

标签：function,Axios,xmlhttp,请求,true,ajax,send,Ajax,交互
来源： https://www.cnblogs.com/arica/p/16490279.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。