美文网首页
Javascript 原生AJAX简单操作

Javascript 原生AJAX简单操作

作者: 有想法的人 | 来源:发表于2018-08-01 09:03 被阅读6次

AJAX操作主要分为如下几步:

1.创建 XMLHttpRequest 对象

var xmlhttp;
if (window.XMLHttpRequest) {
  // code for IE7+, Firefox, Chrome, Opera, Safari 
  xmlhttp=new XMLHttpRequest();
} else {
  // code for IE6, IE5 
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
}

2.向服务器发送请求

xmlhttp.open("GET","test1.txt",true); 
xmlhttp.send();

方法描述:
open(method,url,async)规定请求的类型、URL 以及是否异步处理请求。
method:请求的类型;GET 或 POST
url:文件在服务器上的位置
async:true(异步)或 false(同步)
send(string)将请求发送到服务器。
string:仅用于 POST 请求

向服务器传递参数:

//GET:
xmlhttp.open("GET","demo_get2.asp?fname=Bill&lname=Gates",true); 
xmlhttp.send();
//POST:
xmlhttp.open("POST","ajax_test.asp",true); 
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");

3.执行函数

xmlhttp.onreadystatechange=function() {
  if (xmlhttp.readyState==4 && xmlhttp.status==200) { 
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
  }
}

相关文章

  • Ajax-XMLHttpRequest学习笔记

    最近回归到原生JavaScript巩固基础,学习了原生JavaScript的ajax操作。 XMLHttpRequ...

  • Javascript 原生AJAX简单操作

    AJAX操作主要分为如下几步: 1.创建 XMLHttpRequest 对象 2.向服务器发送请求 方法描述:op...

  • AJAX请求

    原生JavaScript中的AJAX请求 AJAX = Asynchronous JavaScript and X...

  • ajax总结

    1. Ajax 1.1 原生JavaScript封装Ajax 1.2 jquery ajax 及其 快捷方法 $....

  • Ajax

    什么是Ajax(Asynchronous JavaScript and Xml):Ajax通过原生的XMLHttp...

  • vue学习4

    接口调用方式 原生ajax 基于jQuery的ajax fetch axios 异步 JavaScript的执行环...

  • Vue接口调用方式

    接口调用方式 原生ajax 基于jQuery的ajax fetch axios 异步 JavaScript的执行环...

  • JavaScript 原生 AJAX

    JavaScript 原生 ajax 注意浏览器兼容性判断 JQuery 类库的 ajax

  • ajax

    原生ajax配置详解 对ajax简单封装 调用

  • 从屌丝到架构师的飞越(JavaScript篇)-JavaScri

    一、介绍 这节课呢,我们来了解的是JavaScript 原生Ajax请求, Ajax,是Asynchronous ...

网友评论

      本文标题:Javascript 原生AJAX简单操作

      本文链接:https://www.haomeiwen.com/subject/szhlvftx.html