教你轻松使用XMLHttpRequest对象

2024-08-21 15:48

本文主要是介绍教你轻松使用XMLHttpRequest对象,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

一、什么是XMLHttpRequest

  • XMLHttpRequest是 AJAX 的基础。
  • 所有现代浏览器均支持 XMLHttpRequest对象(IE5 和 IE6 使用 ActiveXObject)。
  • XMLHttpRequest用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
  • XMLHttpRequest对象用于和服务器交换数据。





二、为什么使用XMLHttpRequest


  1、本质来说,XMLHttpRequest返回的是一个数据,传统页面返回的是一个页面。

  2、在不重新加载页面的情况下更新网页,在后台向服务器发送数据,实现异步

  3、在页面已加载后从服务器请求或接收数据


三、五步使用XMLHttpRequest


(一)、建立XMLHttpRequest对象


  IE7以上的浏览器,跟普通的对象一样,new就可以了。

xmlhttp=new XMLHttpRequest();

  特别注意的是IE6以下版本的浏览器:

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");


(二)、注册回调函数

 xmlhttp.onreadystatechange=callback;

   Callback 函数是一种以参数形式传递给另一个函数的函数。如果存在多个 AJAX 任务,那应该为创建 XMLHttpRequest对象编写一个标准的函数,并为每个 AJAX 任务调用该函数。该函数调用应该包含 URL 以及发生 onreadystatechange 事件时执行的任务(每次调用可能不尽相同):



(三)、使用open方法设置和服务器端交互的基本信息


xmlhttp.open("GET","Ajax?name=" + userName,true ); 

xmlhttp.open("post", "Ajax", true);  //post方式交互所需要增加的代码
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");



(四)、设置发送的数据,开始和服务器端交互


xmlhttp.send(null);  //get 参数是null,因上一步(open)已经提交
xmlhttp.send("name=" + userName);  //post需要填写提交的数据




  如上所示,如需将请求发送到服务器,我们使用 XMLHttpRequest对象的 open() 和 send() 方法。

建议:


 1、GET 方式的安全性较Post方式要差些,包含机密信息的话,建议用Post数据提交方式

 2、GET 更简单也更快,在做数据查询时,建议用GET 方式;而在做数据添加、修改或删除时,建议用Post方式

 3、在以下情况中,请使用 POST 请求:无法使用缓存文件(更新服务器上的文件或数据库),向服务器发送大量数据(POST 没有数据量限制),发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠



(五)、在回调函数中判断交互是否结束,响应是否正确,并据需要获取服务器端返回的数据,更新页面内容



xmlhttp.readyState == 4   //状态=4响应数据接收成功

xmlhttp.status==200<span style="white-space:pre">	</span>//服务器返回成功码


例子:

<pre name="code" class="html"><span style="font-family:KaiTi_GB2312;font-size:18px;"><!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html><head><title>TODO supply a title</title><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script type="text/javascript">var xmlhttp;function submit(){//alert("te st");//1.创建XMLHttpRequest对象if (window.XMLHttpRequest) {xmlhttp=new XMLHttpRequest();if (xmlhttp.overrideMimeType) {xmlhttp.overrideMimeType("text/xml");}}else if (window.ActiveXObject) {var activexName=["MSXML.2.XMLHTTP.6.0","MSXML.2.XMLHTTP.5.0","MSXML.2.XMLHTTP.4.0","MSXML.2.XMLHTTP.3.0","MSXML.2.XMLHTTP","Miscrosoft.XMLHTTP"];for (var i = 0; i <activexName.length; i++) {try {xmlhttp=new ActiveXObject(activexName[i]);} catch (e) {}}}if (xmlhttp==undefined || xmlhttp==null) {alert("当前浏览器不支持创建XMLHttpRequest对象,请更换浏览器");return;}//alert(xmlhttp);//2.注册回调方法xmlhttp.onreadystatechange=callback;//固定用法,获取文本框中用户输入的内容var userName=document.getElementById("UserName").value;//userName=encodeURI(encodeURI(userName));// alert(userName);/*//3.设置和服务器端交互的相应参数xmlhttp.open("GET","Ajax?name=" + userName,true );                      //4.设置向服务器端发送的数据,启动和服务器端的交互xmlhttp.send(null);*///3.设置和服务器端交互的相应参数xmlhttp.open("post", "Ajax", true);  //post方式交互所需要增加的代码xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//4.设置向服务器端发送的数据,启动和服务器端的交互xmlhttp.send("name=" + userName);}function callback(){//5.判断和服务器端的交互是否完成,还要判断服务器端是否正确返回了数据if (xmlhttp.readyState == 4) {//表示和服务器端的交互已经完成if (xmlhttp.status==200) {//表示和服务器的响应代码是200,正确的返回了数据//纯文本数据的接受方法 var message =xmlhttp.responseText;//Xml数据对应的Dom对象的接受方法//使用的前提是,服务器端需要设置content-type为text/xml//var domXml=xmlhttp.responseXML;//向div标签中填充文本内容的方法var div=document.getElementById("message");div.innerHTML=message;}}}</script></head><body><input type="text" id="UserName" /><input type="button" οnclick="submit()" value="校验用户名"/><div id="message"></div></body>
</html>
</span>


 


四、常用属性与方法









五、小结


  XMLHttpRequest是AJAX技术应用中的核心对象,可以让我们的前台在不向服务器提交整个页面的情况下,实现局部的刷新。可以同步或是异步的返回web服务器的响应,返回的数据不限于XML文档,可以是任何形式的文档。大大提高了客户端到Web服务器端的响应效率,提高了用户的体验度。





这篇关于教你轻松使用XMLHttpRequest对象的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1093592

相关文章

闲置电脑也能活出第二春?鲁大师AiNAS让你动动手指就能轻松部署

对于大多数人而言,在这个“数据爆炸”的时代或多或少都遇到过存储告急的情况,这使得“存储焦虑”不再是个别现象,而将会是随着软件的不断臃肿而越来越普遍的情况。从不少手机厂商都开始将存储上限提升至1TB可以见得,我们似乎正处在互联网信息飞速增长的阶段,对于存储的需求也将会不断扩大。对于苹果用户而言,这一问题愈发严峻,毕竟512GB和1TB版本的iPhone可不是人人都消费得起的,因此成熟的外置存储方案开

中文分词jieba库的使用与实景应用(一)

知识星球:https://articles.zsxq.com/id_fxvgc803qmr2.html 目录 一.定义: 精确模式(默认模式): 全模式: 搜索引擎模式: paddle 模式(基于深度学习的分词模式): 二 自定义词典 三.文本解析   调整词出现的频率 四. 关键词提取 A. 基于TF-IDF算法的关键词提取 B. 基于TextRank算法的关键词提取

使用SecondaryNameNode恢复NameNode的数据

1)需求: NameNode进程挂了并且存储的数据也丢失了,如何恢复NameNode 此种方式恢复的数据可能存在小部分数据的丢失。 2)故障模拟 (1)kill -9 NameNode进程 [lytfly@hadoop102 current]$ kill -9 19886 (2)删除NameNode存储的数据(/opt/module/hadoop-3.1.4/data/tmp/dfs/na

Hadoop数据压缩使用介绍

一、压缩原则 (1)运算密集型的Job,少用压缩 (2)IO密集型的Job,多用压缩 二、压缩算法比较 三、压缩位置选择 四、压缩参数配置 1)为了支持多种压缩/解压缩算法,Hadoop引入了编码/解码器 2)要在Hadoop中启用压缩,可以配置如下参数

Makefile简明使用教程

文章目录 规则makefile文件的基本语法:加在命令前的特殊符号:.PHONY伪目标: Makefilev1 直观写法v2 加上中间过程v3 伪目标v4 变量 make 选项-f-n-C Make 是一种流行的构建工具,常用于将源代码转换成可执行文件或者其他形式的输出文件(如库文件、文档等)。Make 可以自动化地执行编译、链接等一系列操作。 规则 makefile文件

使用opencv优化图片(画面变清晰)

文章目录 需求影响照片清晰度的因素 实现降噪测试代码 锐化空间锐化Unsharp Masking频率域锐化对比测试 对比度增强常用算法对比测试 需求 对图像进行优化,使其看起来更清晰,同时保持尺寸不变,通常涉及到图像处理技术如锐化、降噪、对比度增强等 影响照片清晰度的因素 影响照片清晰度的因素有很多,主要可以从以下几个方面来分析 1. 拍摄设备 相机传感器:相机传

【数据结构】——原来排序算法搞懂这些就行,轻松拿捏

前言:快速排序的实现最重要的是找基准值,下面让我们来了解如何实现找基准值 基准值的注释:在快排的过程中,每一次我们要取一个元素作为枢纽值,以这个数字来将序列划分为两部分。 在此我们采用三数取中法,也就是取左端、中间、右端三个数,然后进行排序,将中间数作为枢纽值。 快速排序实现主框架: //快速排序 void QuickSort(int* arr, int left, int rig

pdfmake生成pdf的使用

实际项目中有时会有根据填写的表单数据或者其他格式的数据,将数据自动填充到pdf文件中根据固定模板生成pdf文件的需求 文章目录 利用pdfmake生成pdf文件1.下载安装pdfmake第三方包2.封装生成pdf文件的共用配置3.生成pdf文件的文件模板内容4.调用方法生成pdf 利用pdfmake生成pdf文件 1.下载安装pdfmake第三方包 npm i pdfma

零基础学习Redis(10) -- zset类型命令使用

zset是有序集合,内部除了存储元素外,还会存储一个score,存储在zset中的元素会按照score的大小升序排列,不同元素的score可以重复,score相同的元素会按照元素的字典序排列。 1. zset常用命令 1.1 zadd  zadd key [NX | XX] [GT | LT]   [CH] [INCR] score member [score member ...]

git使用的说明总结

Git使用说明 下载安装(下载地址) macOS: Git - Downloading macOS Windows: Git - Downloading Windows Linux/Unix: Git (git-scm.com) 创建新仓库 本地创建新仓库:创建新文件夹,进入文件夹目录,执行指令 git init ,用以创建新的git 克隆仓库 执行指令用以创建一个本地仓库的