jQuery ajax之XMLHttpRequest (一)_jquery ajax xmlhttprequest-程序员宅基地

技术标签: ajax  Java学习笔记  

一.什么是ajax
AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。AJAX 不是新的编程语言,而是一种使用现有标准的新方法。
AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下。
XMLHttpRequest 是 AJAX 的基础, 而AJAX是对XMLHttpRequest对象的封装和简化。所以,我们很有必要理解XMLHttpRequest对象的使用。

二. XMLHttpRequest对象的创建
所有现代浏览器(IE7+、Firefox、Chrome、Safari 以及 Opera)均内建 XMLHttpRequest 对象。

创建 XMLHttpRequest 对象的语法:

var xhr=new XMLHttpRequest();


三.向服务器发送request
如需将请求发送到服务器,我们使用 XMLHttpRequest 对象的 open() 和 send() 方法:

xhr.open("GET","test1.txt",true);
xhr.send();

语法格式:
1.open(method,url,async) ,规定请求的类型、URL 以及是否异步处理请求。
(1)method:请求的类型;GET 或 POST
(2)url:文件在服务器上的位置
(3)async:true(异步)或 false(同步)

2.send(string) ,将请求发送到服务器。
(1)string:仅用于 POST 请求
(2)GET 还是 POST ?与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。然而,在以下情况中,请使用 POST 请求:
–无法使用缓存文件(更新服务器上的文件或数据库)
–向服务器发送大量数据(POST 没有数据量限制)
–发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠


GET 请求
一个简单的 GET 请求:

xmlhttp.open("GET","demo_get.asp",true);
xmlhttp.send();

在上面的例子中,您可能得到的是缓存的结果。
为了避免这种情况,请向 URL 添加一个唯一的 ID:

xmlhttp.open("GET","demo_get.asp?t=" +Math.random()
,true);
xmlhttp.send();

如果您希望通过 GET 方法添加参数,请向 URL 添加信息:

xmlhttp.open("GET","demo_get2.asp?fname=Bill&lname=Gates",true);xmlhttp.send();


POST 请求
一个简单 POST 请求:

xmlhttp.open("POST","demo_post.asp",true);xmlhttp.send();

如果需要像 HTML 表单那样 POST 数据,请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据:

xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");


异步 - True 或 False
XMLHttpRequest 对象如果要用于 AJAX 的话,其 open() 方法的 async 参数必须设置为 true:

xmlhttp.open("GET","ajax_test.asp",true);//true表示异步,false表示同步

通过 AJAX,JavaScript 无需等待服务器的响应,而是:
(1)在等待服务器响应时执行其他脚本
(2)当响应就绪后对响应进行处理

1.当使用 async=true 时(大部分情况都是true),请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数:

xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();
//响应函数
xmlhttp.onreadystatechange=function()
{
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
 document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
}
  1. 如需使用 async=false,请将 open() 方法中的第三个参数改为 false。我们不推荐使用 async=false,但是对于一些小型的请求,也是可以的。当您使用 async=false 时,请不要编写 onreadystatechange 函数 - 把代码放到 send() 语句后面即可:
xmlhttp.open("GET","test1.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

请记住,JavaScript 会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢,应用程序会挂起或停止,所以慎用!



四. 处理服务器的response

如需获得来自服务器的响应,请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。responseText 获得字符串形式的响应数据,而responseXML 获得 XML 形式的响应数据。
I.responseText 属性返回字符串形式的响应,因此您可以这样使用:

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

II.如果来自服务器的响应是 XML,而且需要作为 XML 对象进行解析,请使用 responseXML 属性:
html页面:http://www.w3school.com.cn/example/xmle/books.xml

xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++){
    
     txt=txt + x[i].childNodes[0].nodeValue + "<br />";
}
document.getElementById("myDiv").innerHTML=txt;


onreadystatechange 事件

当请求被发送到服务器时,我们需要执行一些基于响应的任务。每当 readyState 改变时,就会触发 onreadystatechange 事件。下面是 XMLHttpRequest 对象的三个重要的属性:
(1)onreadystatechange   
    存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。

(2)readyState   
   存有 XMLHttpRequest 的状态。从 04 发生变化。
    0: 请求未初始化
    1: 服务器连接已建立
    2: 请求已接收
    3: 请求处理中
    4: 请求已完成,且响应已就绪
 (3)status  
    200: "OK"
    404: 未找到页面

当 readyState 等于 4 且状态为 200 时,表示响应已就绪:

xmlhttp.onreadystatechange=function() {
   if (xmlhttp.readyState==4 && xmlhttp.status==200) { 
document.getElementById("myDiv").innerHTML=xmlhttp.responseText; 
     } 
}


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

function myFunction(){
    
        loadXMLDoc("ajax_info.txt",function() {
    
               if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; 
              } 
        });
}


备注:
此笔记是本人根据w3cSchool资料整理而来,对于ajax的内容,请参考后续的文章。希望能与大家相互学习,喜欢的客官记得点赞收藏。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/James15902085063/article/details/79497935

智能推荐

argc、argv 介绍及使用_argc和argv的定义和用法-程序员宅基地

文章浏览阅读3.5k次,点赞7次,收藏21次。argc、argv 介绍及使用argcargv 介绍及使用argcargv介绍argv参数的传入argv参数的使用argc、argv介绍int main(int argc,char* argv[])  argc 是 argument count的缩写,表示传入main函数的参数个数;  argv 是 argument vector的缩写,表示传入main函数的参数序列或指针,并且第一个参数ar_argc和argv的定义和用法

安装Pandas_pandas下载-程序员宅基地

文章浏览阅读9.4k次,点赞10次,收藏40次。文章目录一、Pandas是什么?二、Pandas下载三、官网下载步骤一、Pandas是什么?Pandas 是一个开源的第三方 Python 库,从 Numpy 和 Matplotlib 的基础上构建而来,享有数据分析“三剑客之一”的盛名(NumPy、Matplotlib、Pandas)。Pandas 已经成为 Python 数据分析的必备高级工具,它的目标是成为强大、灵活、可以支持任何编程语言的数据分析工具。二、Pandas下载官网下载地址:https://www.python.org/作者网盘地_pandas下载

TensorFlow2.+下MovingAverage的使用方法_tensorflow averagemodelcheckpoint-程序员宅基地

文章浏览阅读463次。import tensorflow_addons as tfa #需要安装的库 opt = tf.keras.optimizers.Adam(1e-3) #先创建优化器 opt = tfa.optimizers.MovingAverage(opt) #在优化器的基础上加入MovingAverage model_movingAvg_checkpoint_callback = tfa.callbacks.AverageMod.._tensorflow averagemodelcheckpoint

MySQL基本操作2(对数据库的操作和对数据库表的操作)_实训二:mysql基本操作-程序员宅基地

文章浏览阅读345次。一、 对数据库的操作创建一个库 create database 库名 create database 库名 character set 编码 创建带有编码的 查看编码: 删除一个库 drop database 库名 使用库 use 库名 4.查看当前正在操作的库 二、对数据库表的操作1.创建一张表 create table 表名( ..._实训二:mysql基本操作

手写一个Map-1_手写map方法-程序员宅基地

文章浏览阅读403次。在爱酷学习网上学习Java视频,其中有一个自己实现map的功能,这里记录一下如何实现package com.jbx.hash;/*** 自定义实现Map的功能 不完美的原因是for循环影响效率* @author Administrator*Map:存放键值对,根据键对象找对应的值对象,键不能重复*/public class SxtMap001 { SxtEntr..._手写map方法

Opencv3.0 手写数字识别(Hog特征+SVM分类器)_在opencv中,用于手写数字识别的模型训练方法是什么?-程序员宅基地

文章浏览阅读8.1k次,点赞4次,收藏53次。配置:VS2013+Opencv3.0参考:http://blog.csdn.net/iamzhangzhuping/article/details/51254567http://blog.csdn.net/wang382758656/article/details/52723674理论什么的就不多说了,网上很多。直接上干货1、前期准备首先,下载好所需的训练文件_在opencv中,用于手写数字识别的模型训练方法是什么?

随便推点

java.net.ConnectException: Your endpoint configuration is wrong; For more details see: http://wiki....-程序员宅基地

文章浏览阅读6.2k次,点赞2次,收藏5次。今天使用在hive中建表,并在hive中将查询到的语句插入到新表中时,一直开在如图所示位置不动等待了20多分钟,然后报了这么个错java.net.ConnectException: Your endpoint configuration is wrong; For more details see: http://wiki.apache.org/hadoop/Un...

K8S上mysql,无法创建rc解决,打不开/registry.access.redhat.com/redhat-ca.crt问题的解决_kubectl get rc ready 一直为0-程序员宅基地

文章浏览阅读1.5k次。参考文档:表示感谢https://www.cnblogs.com/jason0529/p/9122694.htmlhttps://blog.csdn.net/firehive/article/details/81331802?utm_source=blogxgwz1参考《Kubernetes 权威指南》学习一下k8s,有些坑记录一下一、安装单机版kubernetessystemc..._kubectl get rc ready 一直为0

vue的基础练习实例-程序员宅基地

文章浏览阅读717次。数据单向驱动,双向数据绑定,多选的实现,循环的实现,对象的概念,条件判断,对象的使用,事件的使用,预先加载省份信息。<!--复制进入环境运行时,记得引入vue.js文件,放在js文件中--><!DOCTYPE html><html><head> <meta charset="UTF-8"></head>...

HTML5+React全屏方法实践_react h5 全屏-程序员宅基地

文章浏览阅读495次。实现全屏的条件JavaScript实现click、mousedown、mouseup事件触发全屏的方法全屏元素.requestFullscreen(),如果想做到浏览器的兼容,可在requestFullscreen()前加上前缀,火狐为mozRequestFullScreen,chrome为webkitRequestFullScreen()取消全屏的方法取消全屏元..._react h5 全屏

面试逻辑题-程序员宅基地

文章浏览阅读209次。版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

import requests 错误解决_import requests后面有感叹号-程序员宅基地

文章浏览阅读4.9k次。一开始使用 sudo apt-get install python-requests,但安装失败;随后使用 pip install requests,安装成功。原因未知。_import requests后面有感叹号

推荐文章

热门文章

相关标签