示例:

  第一步:创建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. gRPC安装的小问题

    INSTALL.md提到下述前提条件 #Pre-requisites ##Linux ```sh $ [sudo] apt-get install build-essential autoconf l ...

  2. IDEA插件之FindBugs

    1.是个啥? Findbugs,它是一个静态分析工具,用来查找Java代码中的程序错误.它使用静态分析来识别Java程序中上百种不同类型的潜在错误. 2.安装 File -> Settings ...

  3. java基础知识入门

    一.java简介及原理图 Java的前世今生 Java之父詹姆斯·高斯林: 1967年, 12岁用报废的电话机和电视做了一台电子游戏机; 1983年, 获得卡内基梅隆大学计算机科学博士学位; 1983 ...

  4. springCloud-Hystrix熔断器

    熔断器的原理很简单,如同电力过载保护器.它可以实现快速失败,如果它在一段时间内侦测到许多类似的错误,会强迫其以后的多个调用快速失败,不再访问远程服务器,从而防止应用程序不断地尝试执行可能会失败的操作, ...

  5. 剪花布条 HDU - 2087(kmp,求不重叠匹配个数)

    Problem Description 一块花布条,里面有些图案,另有一块直接可用的小饰条,里面也有一些图案.对于给定的花布条和小饰条,计算一下能从花布条中尽可能剪出几块小饰条来呢? Input 输入 ...

  6. Thinking In Java 4th Chap2 一切都是对象

    对基本数据类型的初始化有二: 1.String s="asdf"; 2.String s=new String("asdf"); 可能的存储区域: 寄存器(不可 ...

  7. CSP/NOIP c++常用模板

    蒟蒻目前还是提高组选手,模板将会持续更新! 目录: 线段树 对拍 exgcd st 树状数组 树剖 dijsktra spfa tarjan 匈牙利 埃筛 差分树状数组 dinic 快速幂取余 Exg ...

  8. XPath库详解

    目录 xpath入门 获取节点 获取所有节点 获取子节点 获取父节点 属性匹配 根据属性值匹配节点 属性多值匹配 多属性匹配 文本获取 按序选择 节点轴选择 补充 xpath的运算符介绍 xpath轴 ...

  9. webpack打包时删除console.log,和debugger

    开发过程中我们不可避免的需要console.log调试,然而在上线时如果不删除这些console.log可能会造成内存泄漏,因为console.log出来的变量是不会被GC的,webpack给我们提供 ...

  10. Angular6如何引入jQuery-knob

    Angular6如何引入jQuery-knob 1.概述 Angular6引入jQuery变得异常简单,请参考https://blog.csdn.net/qq_35321405/article/det ...