原生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. 聊聊MySQL常用的4种主从复制架构
			
    目录 一主多从复制架构 多级复制架构 双主(Dual Master)复制架构 多源(Multi-Source)复制架构 如何优化主从延迟问题? 复制的4中常见架构有一主多从复制架构.多级复制架构.双主 ...
    
			
    2. 
						
  2. javaSE总结（转+总结）
			
    一:java概述: 1,JDK:Java Development Kit,java的开发和运行环境,java的开发工具和jre. 2,JRE:Java Runtime Environment,java ...
    
			
    3. 
						
  3. C#分布式登录——jwt
			
    一.传统的session登录 在服务器存储一份用户登录的信息,这份登录信息会在响应时传递给浏览器,告诉其保存为cookie,以便下次请求时发送给我们的应用,这样我们的应用就能识别请求来自哪个用户了,这 ...
    
			
    4. 
						
  4. topic的相关操作
			
    1.建立topic cd 进入kafka的安装根目录的bin目录下 执行:./kafka-topics.sh --zookeeper ip:port,ip:port,ip:port/kafka-tes ...
    
			
    5. 
						
  5. unsigned char printf 如何输出
			
    参考链接:https://blog.csdn.net/m0_37362454/article/details/88639668 #include <stdio.h> int main()  ...
    
			
    6. 
						
  6. golang学习笔记：Interface类型断言详情
			
    原文链接:https://www.2cto.com/kf/201712/703563.html 1. 用于判断变量类型 demo如下: switch t := var.(type){ case str ...
    
			
    7. 
						
  7. 0基础算法基础学算法 第八弹 递归进阶，dfs第一讲
			
    最近很有一段时间没有更新了,主要是因为我要去参加一个重要的考试----小升初!作为一个武汉的兢兢业业的小学生当然要去试一试我们那里最好的几个学校的考试了,总之因为很多的原因放了好久的鸽子,不过从今天开 ...
    
			
    8. 
						
  8. 第2篇 Scrum 冲刺博客
			
    1.站立会议 照骗 进度 成员 昨日完成任务 今日计划任务 遇到的困难 钟智锋 无 确定客户端和服务器通信的形式 各成员的代码难以统一 庄诗楷 无 编写客户端UI 加入图片总是失败 易德康 无 马,车 ...
    
			
    9. 
						
  9. 使用log4j将数据流入flume
			
    最近做了一个log抽取的项目,采用log4j+flume实现,在此分享记录一下. 准备 什么是flume? flume是一个提供高可用的,高可靠的,分布式的海量日志采集.聚合和传输的系统. flume ...
    
			
    10. 
						
  10. 兄弟，别再爬妹子图了整点JS逆向吧--陆金所密码加密破解
			
    好久没有写爬虫文章了,今晚上得空看了一下陆金所登录密码加密,这个网站js加密代码不难,适合练手,篇幅有限,完整js代码我放在了这里从今天开始种树,不废话,直接开整. 前戏热身 打开陆金所网站,点击到登 ...
    
			
    11.