原生XMLHttpRequest (ajax)的简单使用
示例:
第一步:创建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)的简单使用的更多相关文章
- 使用XMLHttpRequest对象完成原生的AJAX请求
1.大家眼中的Ajax 说到Ajax,只要有过前端开发经验的童鞋一定都不陌生,大都知道它就是一种与后端之间的通信技术,通过这个神奇的家伙,我们不用像传统表单那样填完信息一点提交就呼啦呼啦跳转了.Aja ...
- html --- ajax --- javascript --- 简单的封装
Ajax的简单封装 Ajax的全称是AsynchronousJavaScriptAndXML 如有疑问请参考:http://zh.wikipedia.org/zh-cn/AJAX 以及传智播客的视频教 ...
- php+jquery+ajax+json简单小例子
直接贴代码: <html> <title>php+jquery+ajax+json简单小例子</title> <?php header("Conte ...
- 原生js ajax请求
什么是ajax AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新. 这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新, ...
- 第107天:Ajax 实现简单的登录效果
使用 Ajax 实现简单的登录效果 Ajax是一项使局部网页请求服务器信息,而不需整体刷新网页内容的异步更新技术.这使得向服务器请求的数据量大大减少,而且不会因局部的请求失败而影响到整体网页的加载. ...
- 原生js ajax与jquery ajax的区别
原生js ajax的调用: ajax({ type : "get", url : "02_ajax_get.txt", data : { "userN ...
- 原生 XMLHttpRequest
一.什么是XMLHttpRequest? XHR英文全名XmlHttpRequest,中文可以解释为可扩展超文本传输请求.Xml可扩展标记语言,Http超文本传输协议,Request请求.XMLHtt ...
- Django ajax的简单使用、自定义分页器
一. ajax初识 1. 前后端传输数据编码格式contentType 使用form表单向后端提交数据时,必须将form表单的method由默认的get改为post,如果提交的数据中包含文件,还要将f ...
- js原生的Ajax
js原生的Ajax其实就是围绕浏览器内内置的Ajax引擎对象进行学习的,要使用js原 生的Ajax完成异步操作,有如下几个步骤: 1)创建Ajax引擎对象 2)为Ajax引擎对象绑定监听(监听服务器已 ...
随机推荐
- gRPC安装的小问题
INSTALL.md提到下述前提条件 #Pre-requisites ##Linux ```sh $ [sudo] apt-get install build-essential autoconf l ...
- IDEA插件之FindBugs
1.是个啥? Findbugs,它是一个静态分析工具,用来查找Java代码中的程序错误.它使用静态分析来识别Java程序中上百种不同类型的潜在错误. 2.安装 File -> Settings ...
- java基础知识入门
一.java简介及原理图 Java的前世今生 Java之父詹姆斯·高斯林: 1967年, 12岁用报废的电话机和电视做了一台电子游戏机; 1983年, 获得卡内基梅隆大学计算机科学博士学位; 1983 ...
- springCloud-Hystrix熔断器
熔断器的原理很简单,如同电力过载保护器.它可以实现快速失败,如果它在一段时间内侦测到许多类似的错误,会强迫其以后的多个调用快速失败,不再访问远程服务器,从而防止应用程序不断地尝试执行可能会失败的操作, ...
- 剪花布条 HDU - 2087(kmp,求不重叠匹配个数)
Problem Description 一块花布条,里面有些图案,另有一块直接可用的小饰条,里面也有一些图案.对于给定的花布条和小饰条,计算一下能从花布条中尽可能剪出几块小饰条来呢? Input 输入 ...
- Thinking In Java 4th Chap2 一切都是对象
对基本数据类型的初始化有二: 1.String s="asdf"; 2.String s=new String("asdf"); 可能的存储区域: 寄存器(不可 ...
- CSP/NOIP c++常用模板
蒟蒻目前还是提高组选手,模板将会持续更新! 目录: 线段树 对拍 exgcd st 树状数组 树剖 dijsktra spfa tarjan 匈牙利 埃筛 差分树状数组 dinic 快速幂取余 Exg ...
- XPath库详解
目录 xpath入门 获取节点 获取所有节点 获取子节点 获取父节点 属性匹配 根据属性值匹配节点 属性多值匹配 多属性匹配 文本获取 按序选择 节点轴选择 补充 xpath的运算符介绍 xpath轴 ...
- webpack打包时删除console.log,和debugger
开发过程中我们不可避免的需要console.log调试,然而在上线时如果不删除这些console.log可能会造成内存泄漏,因为console.log出来的变量是不会被GC的,webpack给我们提供 ...
- Angular6如何引入jQuery-knob
Angular6如何引入jQuery-knob 1.概述 Angular6引入jQuery变得异常简单,请参考https://blog.csdn.net/qq_35321405/article/det ...