原生ajax，基于XMLHttpRequest对象来完成请求

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<h1>XMLHttpRequest - Ajax请求</h1>
    <input type="button" onclick="XmlGetRequest();" value="Get发送请求" />
    <input type="button" onclick="XmlPostRequest();" value="Post发送请求" />

<script src="/statics/jquery-1.12.4.js"></script>
    <script type="text/javascript">

function GetXHR(){
            var xhr = null;
            if(XMLHttpRequest){
                xhr = new XMLHttpRequest();
            }else{
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
            return xhr;

}

function XhrPostRequest(){
            var xhr = GetXHR();
            // 定义回调函数，满足特定条件，才能执行回调函数
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4){
                    // 已经接收到全部响应数据，执行以下操作
                    var data = xhr.responseText;
                    console.log(data);
                }
            };
            // 指定连接方式和地址----文件方式
            xhr.open('POST', "/test/", true);
            // 设置请求头,django才会将boday内容解析到request.post内
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8');
            // 发送请求
            xhr.send('n1=1;n2=2;');
        }

function XhrGetRequest(){
            var xhr = GetXHR();
            // 定义回调函数
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4){
                    // 已经接收到全部响应数据，执行以下操作
                    var data = xhr.responseText;
                    console.log(data);
                }
            };
            // 指定连接方式和地址----文件方式
            xhr.open('get', "/test/", true);
            // 发送请求
            xhr.send();
        }

</script>

</body>
</html>

基于原生AJAX - Demo

XmlHttpRequest对象的主要属性：　　
a. Number readyState
   状态值（整数）
   详细：
      0-未初始化，尚未调用open()方法；
      1-启动，调用了open()方法，未调用send()方法；
      2-发送，已经调用了send()方法，未接收到响应；
      3-接收，已经接收到部分响应数据；
      4-完成，已经接收到全部响应数据；
b. Function onreadystatechange
   当readyState的值改变时自动触发执行其对应的函数（回调函数）
c. String responseText
   服务器返回的数据（字符串类型）
d. XmlDocument responseXML
   服务器返回的数据（Xml对象）
e. Number states
   状态码（整数），如：200、404...
f. String statesText
   状态文本（字符串），如：OK、NotFound...
 
　XmlHttpRequest对象的主要方法：
a. void open(String method,String url,Boolen async)
   用于创建请求   
   参数：
       method： 请求方式（字符串类型），如：POST、GET、DELETE...
       url：    要请求的地址（字符串类型）
       async：  是否异步（布尔类型）
b. void send(String body)
    用于发送请求
    参数：
        body： 要发送的数据（字符串类型）
c. void setRequestHeader(String header,String value)
    用于设置请求头
    参数：
        header： 请求头的key（字符串类型）
        vlaue：  请求头的value（字符串类型）
d. String getAllResponseHeaders()
    获取所有响应头
    返回值：
        响应头数据（字符串类型）
e. String getResponseHeader(String header)
    获取响应头中指定header的值
    参数：
        header： 响应头的key（字符串类型）
    返回值：
        响应头中指定的header对应的值
f. void abort()
    终止请求


　　


 


</script>
												


											
ajax之---原生ajax的更多相关文章
	

    
						
  1. ajax和原生ajax、文件的上传
		
    ajax理解: ajax发送的请求是异步处理的.也就是说如下形式: function f1(){ $.ajax( { ....... success:function(){ a= return a } ...
    
		
    2. 
								
  2. JavaScript之AJAX：原生ajax入门
		
    背景 传统的Web应用允许用户端填写表单(form),当提交表单时就向网页服务器发送一个请求.服务器接收并处理传来的表单,然后送回一个新的网页,但这个做法浪费了许多带宽,因为在前后两个页面中的大部分H ...
    
		
    3. 
						
  3. JavaScript入门之AJAX：原生ajax
		
    背景 传统的Web应用允许用户端填写表单(form),当提交表单时就向网页服务器发送一个请求.服务器接收并处理传来的表单,然后送回一个新的网页,但这个做法浪费了许多带宽,因为在前后两个页面中的大部分H ...
    
		
    4. 
						
  4. django上课笔记7-jQuery Ajax 和 原生Ajax-伪造的Ajax-三种Ajax上传文件方法-JSONP和CORS跨域资源共享
		
    一.jQuery Ajax 和 原生Ajax from django.conf.urls import url from django.contrib import admin from app01  ...
    
		
    5. 
						
  5. JavaScript的原生Ajax解析
		
    通过JavaScript的Ajax进行详细的解析过程,从而更好的了解Jquery的Ajax. 顺带,我会在后面把我整理的一整套CSS3,PHP,MYSQL的开发的笔记打包放到百度云,有需要可以直接去百 ...
    
		
    6. 
						
  6. 原生Ajax
		
    使用原生Ajax 验证用户名是否被注册 创建出注册信息: <h1>注册信息</h1><input type="text" name="txt ...
    
		
    7. 
						
  7. JS原生ajax与Jquery插件ajax深入学习
		
    序言: 近来随着项目的上线实施,稍微有点空闲,闲暇之时偶然发现之前写的关于javascript原生xmlHttpRequest ajax方法以及后来jquery插件ajax方法,于是就行了一些总结,因 ...
    
		
    8. 
						
  8. 原生Ajax 和Jq Ajax
		
    前言:这次介绍的是利用ajax与后台进行数据交换的小例子,所以demo必须通过服务器来打开.服务器环境非常好搭建,从网上下载wamp或xampp,一步步安装就ok,然后再把写好的页面放在服务器中指定的 ...
    
		
    9. 
						
  9. 手写原生ajax
		
    关于手写原生ajax重要不重要,各位道友自己揣摩吧, 本着学习才能进步,分享大家共同受益,自己也在自己博客里写一下 function createXMLHTTPRequest() { //1.创建XM ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Homekit_Dohome_月球灯
			
    此款月球灯可以使用Homekit或者Dohome App进行有效的智能控制,支持多种色彩和亮度调节,功能强大,有兴趣的可以去以下链接看看: https://item.taobao.com/item.h ...
    
			
    2. 
						
  2. SpringBoot整合Spring Security
			
    好好学习,天天向上 本文已收录至我的Github仓库DayDayUP:github.com/RobodLee/DayDayUP,欢迎Star,更多文章请前往:目录导航 前言 Spring Securi ...
    
			
    3. 
						
  3. 没有Qt Quick UI，没有 Qt Quick Project
			
    书上写的是File ‣ New File or Project ‣ Qt Quick Project ‣ Qt Quick UI 但实际上是File ‣ New File or Project ‣ O ...
    
			
    4. 
						
  4. Mybatis-05-使用注解开发
			
    使用注解开发 1 面向接口编程 原因: 解耦.可扩展性.提高复用性 关于接口的理解 定义与实现的分离 两类接口 一个个体的抽象,abstract class 一个个体某个方面的抽象,interface ...
    
			
    5. 
						
  5. 在Linux使用虚拟环境
			
    定义 “虚拟环境”,是python解释器的一个私有副本.在这个环境中,你可以安装私有包,而且不会影响系统中安装的全局python解释器. 作用 为每个程序单独创建虚拟环境时,可以保证程序只能访问虚拟环 ...
    
			
    6. 
						
  6. pandas | DataFrame中的排序与汇总方法
			
    本文始发于个人公众号:TechFlow,原创不易,求个关注 今天是pandas数据处理专题的第六篇文章,我们来聊聊DataFrame的排序与汇总运算. 在上一篇文章当中我们主要介绍了DataFrame ...
    
			
    7. 
						
  7. RPC 框架通俗解释 转自知乎（洪春涛）
			
    本地过程调用 RPC就是要像调用本地的函数一样去调远程函数.在研究RPC前,我们先看看本地调用是怎么调的.假设我们要调用函数Multiply来计算lvalue * rvalue的结果: 那么在第8行时 ...
    
			
    8. 
						
  8. linux 部署jar包开机自启
			
    1.用xShell将jar包上传到linux上(jar包上传到 /root/java) 输入rz命令,看是否已经安装了lrzsz,如果没有安装则执行  yum   -y  install  lrzsz ...
    
			
    9. 
						
  9. Spring Security拦截器加载流程分析--练气中期
			
    写在前面 上回我们讲了spring security整合spring springmvc的流程,并且知道了spring security是通过过滤器链来进行认证授权操作的.今天我们来分析一下sprin ...
    
			
    10. 
						
  10. 解决使用git，ssh每次都要输入密码
			
    建议:生成ssh 公钥私钥的时候,不要输入密码. 解决方案: 1.修改密码:使用命令 ssh-keygen -p 然后修改密码的时候直接回车,也就是把密码置空. 2.重新生成ssh key, 用 ss ...
    
			
    11.