分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 运营维护

原生Ajax(XMLHttpRequest)

发布时间:2023-09-06 02:28责任编辑:彭小芳关键词:Ajax

一、什么是Ajax:

  • 全称Asynchronous JavaScript and XML;

  • 异步的 JavaScript 和 XML;

  • 可以在不重新加载整个页面的情况下(偷偷发数据),与服务器交换数据并更新部分网页内容;

二、Ajax之XMLHttpRequest:

1)五步使用法:

  1.创建XMLHTTPRequest对象

  2.使用open方法设置和服务器的交互信息

  3.设置发送的数据,开始和服务器端交互

  4.拿到数据后执行相关操作

这是GET请求:

HTML:<a class="btn" onclick="AjaxSubmit2()">XMLHttpRequest点我</a><script> ???????function AjaxSubmit2() { ???????????//第1步 ???????????var xhr = new XMLHttpRequest(); ???????????//第2步设置发送方法 ???????????xhr.open(‘GET‘,‘/ajax1.html?p=123‘); ???????????//第3步设置发送数据 ???????????xhr.send(null); ???????????//第4步,回调函数,拿到服务端数据后执行相关操作 ???????????xhr.onreadystatechange = function () { ???????????????if(xhr.readyState == 4){ ???????{# 有0,1,2,3,4 四个数字都代表4个状态 #} ???????????????????// 接收服务端的全部信息 ???????????????????console.log(xhr.responseText); ???????????????} ???????????}; ???????} ???</script>
POST请求:跟GET请求不一样的是需要加上请求头HTML:<a class="btn" onclick="AjaxSubmit4()">XMLHttpRequest点我</a><script>function AjaxSubmit4() { ???var xhr = new XMLHttpRequest(); ???xhr.onreadystatechange = function () { ???????????if(xhr.readyState == 4){ ???????????????console.log(xhr.responseText); ???????????} ???}; ???xhr.open("POST","/ajax1.html"); ???{# ?POST请求需要携带请求头,Django才能解析出来 ?#} ???xhr.setRequestHeader(‘Content-Type‘,‘application/x-www-form-urlencoded; charset-UTF-8‘); ???xhr.send("q=456");}</script>

 

原生Ajax(XMLHttpRequest)

原文地址:https://www.cnblogs.com/ray-h/p/10202529.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved