示例:

  第一步:创建XMLHttpRequest对象

 var httpxml ;
if(window.XMLHttpRequest){
//大多数浏览器
httpxml = new XMLHttpRequest();
}else{
//古董级浏览器
httpxml = new ActiveXObject("Microsoft.XMLHTTP");
}

  第二步:向服务器发送请求

使用 XMLHttpRequest 对象的 open() 和 send() 方法。具体参数,如下所示:

使用方法:

  GET使用方法:

  xmlhttp.open("GET","URL",true);

  xmlhttp.send();

  POST使用方法

  xmlhttp.open("POST",“URL”,true);

  xmlhttp.send();

  如果 post 请求中带参数需使用setRequestHeader() 来添加 HTTP 头。

  xmlhttp.open("post","url",true);

  xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

第三步:使用 onreadystatechange 事件监听状态变化,并获取服务器响应

  

xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
document.getElementById("容器").innerHTML = xmlhttp.response.Text;
}
}

 服务器响应有两种形式: responseText 或 responseXML 。

  responseText代表获得字符串形式的响应数据。

  responseXML代表获得 XML 形式的响应数据

状态:

  (1)readyState存有XMLHttpRequest 的状态,0~4。

0——请求未初始化

1——服务器连接已经建立

2——请求已接受

3——请求处理中

4——请求已完成,且响应已就绪。

  (2)status,HTTP的特定状态码:

   100-199:信息性的标示用户应该采取的其他动作。

   200-299:表示请求成功。

   300-399:用于那些已经移走的文件,常常包括Location报头,指出新的地址。

   400-499:表明客户引发的错误。

   500-599:由服务器引发的错误。

使用GET方法的具体代码

<script>
var httpxml ;
if(window.XMLHttpRequest){
//大多数浏览器
httpxml = new XMLHttpRequest();
}else{
//古董级浏览器
httpxml = new ActiveXObject("Microsoft.XMLHTTP");
}
httpxml.onreadystatechange =function () {
if(httpxml.readyState==4 && httpxml.status==200){
console.log(httpxml)
}else{
console.log("发生了错误");
}
}
httpxml.open("get","http://localhost:8080/ServletDemo",true);
httpxml.send(); </script>

使用POST的方法具代码

<script>
var httpxml ;
if(window.XMLHttpRequest){
//大多数浏览器
httpxml = new XMLHttpRequest();
}else{
//古董级浏览器
httpxml = new ActiveXObject("Microsoft.XMLHTTP");
}
httpxml.onreadystatechange =function () {
if(httpxml.readyState==4 && httpxml.status==200){
console.log(httpxml)
}else{
console.log("发生了错误");
}
}
httpxml.open("post","http://localhost:8080/ServletDemo",true);
   xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
httpxml.send("name='参数1'&name1='参数2'"); </script>

  

原生XMLHttpRequest (ajax)的简单使用的更多相关文章

  1. 使用XMLHttpRequest对象完成原生的AJAX请求

    1.大家眼中的Ajax 说到Ajax,只要有过前端开发经验的童鞋一定都不陌生,大都知道它就是一种与后端之间的通信技术,通过这个神奇的家伙,我们不用像传统表单那样填完信息一点提交就呼啦呼啦跳转了.Aja ...

  2. html --- ajax --- javascript --- 简单的封装

    Ajax的简单封装 Ajax的全称是AsynchronousJavaScriptAndXML 如有疑问请参考:http://zh.wikipedia.org/zh-cn/AJAX 以及传智播客的视频教 ...

  3. php+jquery+ajax+json简单小例子

    直接贴代码: <html> <title>php+jquery+ajax+json简单小例子</title> <?php header("Conte ...

  4. 原生js ajax请求

    什么是ajax AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新. 这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新, ...

  5. 第107天:Ajax 实现简单的登录效果

    使用 Ajax 实现简单的登录效果 Ajax是一项使局部网页请求服务器信息,而不需整体刷新网页内容的异步更新技术.这使得向服务器请求的数据量大大减少,而且不会因局部的请求失败而影响到整体网页的加载. ...

  6. 原生js ajax与jquery ajax的区别

    原生js ajax的调用: ajax({ type : "get", url : "02_ajax_get.txt", data : { "userN ...

  7. 原生 XMLHttpRequest

    一.什么是XMLHttpRequest? XHR英文全名XmlHttpRequest,中文可以解释为可扩展超文本传输请求.Xml可扩展标记语言,Http超文本传输协议,Request请求.XMLHtt ...

  8. Django ajax的简单使用、自定义分页器

    一. ajax初识 1. 前后端传输数据编码格式contentType 使用form表单向后端提交数据时,必须将form表单的method由默认的get改为post,如果提交的数据中包含文件,还要将f ...

  9. js原生的Ajax

    js原生的Ajax其实就是围绕浏览器内内置的Ajax引擎对象进行学习的,要使用js原 生的Ajax完成异步操作,有如下几个步骤: 1)创建Ajax引擎对象 2)为Ajax引擎对象绑定监听(监听服务器已 ...

随机推荐

  1. [OpenCV] sift demo

    运行环境:vs2012+opencv320 sift 需要的头文件为 <opencv2/xfeatures2d.hpp> #include <opencv2/opencv.hpp&g ...

  2. DB2 数据库权限

    以下内容转载:  http://blog.csdn.net/xiyuan1999/article/details/8135263 DB2中的权限 DB2 中有三种主要的安全机制,可以帮助 DBA 实现 ...

  3. [转帖CCIX]

    业界七巨头联手,数据中心通过PCIe实现25Gbps数据通信! 2017-06-07 17:31 CCIX(Cache Coherent Interconnect for Accelerators,针 ...

  4. 怎么才能记住java线程的start()和run()谁是启动方法

    start()和run()开始的时候总是记不住那个是线程的启动方法,现在是记得很真切了! 如果用run()启动线程就跟不用线程效果是一样的,因为是run是顺序执行的.start()才是线程的启动方法. ...

  5. python 基础(十五)--time和datatime模块

    time模块 time.time():返回当前时间,时间戳 time.clock():返回cpu时间(?),当有time.sleep()时,time.clock()不计时 time.localtime ...

  6. pt-table-checksum和pt-table-sync使用

    pt-table-checksum和pt-table-sync使用 数据库版本:5.6.25 pt工具版本:2.2.14 主从关系一:不同机器同一端口 10.10.228.163:4306(rescs ...

  7. java都13了, 8的新特性你还没不会用吗

    前言 java13都已经来了,很多同学还停留在使用java5的东西.如果在日常开发中没有使用上java8的一些新特性或者不会用.这篇文章对你可能有帮助. lambda表达式 介绍 lambda表达式是 ...

  8. R-corrplot相关性绘图,只有你想不到的

    初步接触数据集,探索性分析后,经常需要做一个相关分析,得到各变量间的相关系数以及显著性水平. 本文介绍一下R-corrplot包进行相关可视化展示. 一 数据准备 载入所需的R包,利用公共数据集mtc ...

  9. 使用Enablebuffering多次读取Asp Net Core 3.0 请求体 读取Request.Body流

    原文:使用Enablebuffering多次读取Asp Net Core 请求体 使用Enablebuffering多次读取Asp Net Core 请求体 1 .Net Core 2.X时代 使用E ...

  10. 按Excel的模板导出数据

    思路:把Excel模板上传到服务器:然后读取文档,写入数据,另存为新的文件 然后就是导出的时候处理数据定义的字符串,按数据导出:注意读取的数据流要处理下,不然会报异常 public Stream Ge ...