原生javascript中的的AJAX写法

简介: js中ajax get请求的写法var xhr=new XMLHttpRequest(); xhr.open('get','请求地址') xhr.send(); xhr.

js中ajax get请求的写法

var xhr=new XMLHttpRequest();
            xhr.open('get','请求地址')
            xhr.send();
            xhr.onreadystatechange=function () {
                if (xhr.readyState==4) {
                    // console.log(xhr.responeText
                }
            }

js中post请求的写法

var xhr = new XMLHttpRequest();
xhr.open('post',"请求地址",true);
// 如果是post请求 必须加上请求头
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send("userName="+user.value+'&passWord='+pass.value);
xhr.onreadystatechange =function(){
 if (xhr.readyState==4) {
 var obj = JSON.parse(xhr.responseText);
 console.log(obj.responseCode);
 if (obj.responseCode=="0") {
 window.location.href = "denglu.html"
 }
 }
}
相关文章
|
18小时前
|
存储 JavaScript 前端开发
原生JS如何实现验证码
原生JS如何实现验证码
9 0
|
19小时前
|
JavaScript 安全 前端开发
原生JS实现一键复制,一键粘贴
原生JS实现一键复制,一键粘贴
5 0
|
8天前
|
XML 前端开发 JavaScript
【JavaScript技术专栏】JavaScript网络请求与Ajax技术
【4月更文挑战第30天】Ajax是Web开发中实现动态数据更新的关键技术,允许不刷新页面即从服务器获取数据。它结合了HTML/CSS、DOM、XML/JSON和JavaScript。`XMLHttpRequest`是传统的Ajax实现方式,而`fetch` API是现代、简洁的替代选项。Ajax应用实例展示了如何使用fetch在搜索框输入时异步获取并显示结果,提升了用户体验。掌握这些技术对前端开发者至关重要。
|
10天前
|
前端开发 JavaScript 调度
原生JavaScript实现弹幕组件
原生JavaScript实现弹幕组件
|
13天前
|
JavaScript 前端开发
js原生自调用函数原理
JavaScript中的IIFE(Immediately Invoked Function Expression)是定义后立即执行的函数表达式。它有两种实现方式:匿名函数表达式 `(function() { /* 函数体 */ })()` 和命名函数声明 `(function myFunction() { /* 函数体 */ })()`。IIFE提供封闭作用域,防止变量冲突,常用于创建私有作用域、封装代码和避免变量提升问题。执行后,IIFE内部的变量和函数会被销毁,除非被特意暴露。
|
13天前
|
存储 JavaScript 前端开发
js原生方法,获取url上面所有参数,并返回一个对象
JavaScript函数`getUrlParameters`用于从URL中提取所有参数并返回一个键值对对象。它接收URL,分割查询字符串,解码参数对,并存储在对象中。重复参数键会被存储为数组。
|
13天前
|
JavaScript 前端开发 BI
原生html—摆脱ps、excel 在线绘制财务表格加水印(html绘制表格js加水印)
原生html—摆脱ps、excel 在线绘制财务表格加水印(html绘制表格js加水印)
18 1
|
16天前
|
移动开发 JavaScript HTML5
input | pattern | oninvalid | setCustomValidity | html5原生js表单校验
input | pattern | oninvalid | setCustomValidity | html5原生js表单校验
14 0
|
16天前
|
JavaScript
Vue与原生JS中方法调用
Vue与原生JS中方法调用
7 0
|
16天前
|
JavaScript 前端开发 UED
深入解析JavaScript原生操作DOM技术
【4月更文挑战第22天】本文深入探讨JavaScript原生DOM操作技术,包括使用`getElement*`方法和CSS选择器获取元素,借助`createElement`与`appendChild`动态创建及插入元素,修改元素内容、属性和样式,以及删除元素。通过掌握这些技术,开发者能实现页面动态交互,但应注意避免过度操作DOM以优化性能和用户体验。