Ajax基础（一）

最新推荐文章于 2024-08-16 19:02:09 发布
最新推荐文章于 2024-08-16 19:02:09 发布
阅读量786 收藏 1
点赞数
分类专栏： Html 文章标签： ajax xmlhttprequest asynchronous javascript function 服务器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zjxcs/article/details/1218917
版权

一、Ajax简介

Ajax应用
1、在钻石某一面拖动鼠标会带来动态效果
2、把鼠标放在影片的图片上就会出现一个气泡，提供这个影片的更多细节。页面不会刷新。客户也不必点击影片，看完信息再回到影片列表。
3、当用户输入邮政编码时，可以验证它是否正确，然后自动能够用相应的城市名和州名填充到表单中的其他部分
4、当用户选择美国时，可以引入美国各个州的一个下拉列表。

原来把Ajax认为是Asynchronous JavaScript＋XML的缩写，但如今，这个词的覆盖面有所扩展，把允许浏览器与服务器通信而无需刷新当前页面的技术都涵盖在内

较旧技术优点
更新下拉列表信息：一个简单的请求，就能得到更新下拉列表所需的部分信息。
验证：使用XHR，可以对服务器做一个调用，触发一组验证规则，这些规则可能比你用JavaScript编写的任何规则都更丰富、更复杂。

作为Ajax的核心，XHR对象设计为允许从服务器异步获取任意的数据。

因为是部分刷新，用户有时可能不会注意到与以前有什么变化，为了这个问题引出了黄褪技术（Yellow Fade Technique，YFT），取页面中有变化的部分，并置为黄色。过段时间再让黄色逐渐褪色，直到恢复为原来的背景色。也可以选择其他颜色，只要能把用户注意力吸引至有变化的部分。

Ajax的缺点
1、通过XHR做出请求不会修改浏览器的历史栈。
2、Ajax不会修改地址栏中显示的链接。这表明你不能轻松地为一个页面建立书签，或者向朋友发送一个链接。
3、异步完成操作，会与用户习惯的请求/相应模式相悖。我们修改了页面地一部分，如果用户没想到这一点，他们可能会被搞糊涂。

Ajax相关技术
HTML、DOM、CSS、JavaScript、XML

测试驱动：JsUnit、Selenium

适合采用Ajax实现的功能：
验证、表单填写、DOM“拖”技术建动态网站，如google个性化主页。

设计考虑
要尽量减少客户和服务器之间的通信量。如果应用得当，Ajax会使你的应用响应更快。

安全问题
从浏览器查看源代码，任何人都能知道你使怎么创建小部件的。
建立XHR对象时必须包含统一资源定位符，可能会有恶意用户修改你的网站，运行他们自己的代码。
谨慎地使用Ajax可以降低这种风险。

小结
胖客户应用地开发人员饱受部署之苦，因为要把应用部署到数以千计地用户机器上。Ajax可以利用Web减轻他们的负担。

二、使用XMLHttpRequest对象

1、创建XMLHttpRequest对象

在使用XMLHttpRequest对象发送请求和处理响应之前，必须先用JavaScritp创建一个XMLHttpRequest对象。

Internet Explorer把XMLHttpRequest实现为一个ActiveX对象
其他浏览器把它实现为一个本地JavaScript对象。

通过检验是否对ActiveX对象支持来区分浏览器类型，从而确定创建XMLHttpRequest对象的实例。

var xmlHttp;  //创建全局变量保存XHR对象的引用
function createXMLHttpRequest(){
    if(window.ActiveXObject){
       xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    else if(window.XMLHttpRequest){
       xmlHttp=new XMLHttpRequest();
    }
}


2、XMLHttpRequest对象的一些方法
abort()停止当前请求
string getAllResponseHeaders()返回一个串，其中包含Http请求的所有响应首部，首部包括Content-Length、Data、和 URL
string getResponseHeader("header")参数string header表示你希望得到的指定首部值并把这个值作为串返回。
open("method","url")建立对服务器的调用。method参数可以时GET、POST或PUT。url参数可以是相对的URL或绝对 URL。这个方法还包括3个可选参数
send(content)向服务器发送请求
setRequestHeader("header","value")把指定首部设置为所提供的值。在设置任何首部之前必须先调用open()

3、XMLHttpRequest对象的一些属性
onreadystatechange每个状态改变时都会触发这个事件处理器，通常会调用一个JavaScritp函数
readyState请求的状态。0＝未初始化，1＝正在加载，2＝已加载，3＝交互中，4＝完成
responseText服务器的响应，表示为一个串
responseXML服务器的响应，表示为XML。这个对象可以解析为一个DOM对象
status服务器的HTTP状态码，200—ok，404—Not Found等
statusTextHTTP状态码的相应文本，OK或Not Found等

XMLHttpRequest对象的onreadystatechange属性存储了回调函数的指针。
当XMLHttpRequest对象的内部状态发生变化时，就会调用这个回调函数。

实例1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Simple XMLHttpRequest</title>
   
<script type="text/javascript">
var xmlHttp;

function createXMLHttpRequest() {
    if (window.ActiveXObject) {
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    else if (window.XMLHttpRequest) {
        xmlHttp = new XMLHttpRequest();
    }
}
   
function startRequest() {
    createXMLHttpRequest();
    xmlHttp.onreadystatechange = handleStateChange;
    xmlHttp.open("GET", "simpleResponse.xml", true);
    xmlHttp.send(null);
}
   
function handleStateChange() {
    if(xmlHttp.readyState == 4) {
        if(xmlHttp.status == 200) {
            alert("The server replied with: " + xmlHttp.responseText);
        }
    }
}
</script>
</head>

<body>
    <form action="#">
        <input type="button" value="Start Basic Asynchronous Request" οnclick="startRequest():"/>
    </form>
</body>
</html>


实例2

<%@ page contentType="text/html; charset=gb2312" language="java" errorPage="" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<script language="javascript">
 var http_request = false;
 function send_request(url) {//初始化、指定处理函数、发送请求的函数
  http_request = false;
  //开始初始化XMLHttpRequest对象
  if(window.XMLHttpRequest) { //Mozilla 浏览器
   http_request = new XMLHttpRequest();
   if (http_request.overrideMimeType) {//设置MiME类别
    http_request.overrideMimeType('text/xml');
   }
  }
  else if (window.ActiveXObject) { // IE浏览器
   try {
    http_request = new ActiveXObject("Msxml2.XMLHTTP");
   } catch (e) {
    try {
     http_request = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (e) {}
   }
  }
  if (!http_request) { // 异常，创建对象实例失败
   window.alert("不能创建XMLHttpRequest对象实例.");
   return false;
  }
  http_request.onreadystatechange = processRequest;
  // 确定发送请求的方式和URL以及是否同步执行下段代码
  http_request.open("GET", url, true);
  http_request.send(null);
 }
 // 处理返回信息的函数
    function processRequest() {
        if (http_request.readyState == 4) { // 判断对象状态
            if (http_request.status == 200) { // 信息已经成功返回，开始处理信息
                alert(http_request.responseText);
            } else { //页面不正常
                alert("您所请求的页面有异常。");
            }
        }
    }
 function userCheck() {
  var f = document.form1;
  var username = f.username.value;
  if(username=="") {
   window.alert("用户名不能为空。");
   f.username.focus();
   return false;
  }
  else {
   send_request('sample1_2.jsp?username='+username);
  }
 }
</script>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>

<body>
<form name="form1" action="" method="post">
用户名：<input type="text" name="username" value="">&nbsp;
<input type="button" name="check" value="唯一性检查" onClick="userCheck()">
<input type="submit" name="submit" value="提交">
</form>
<!--span style="cursor: pointer; text-decoration: underline" οnclick="send_request('2.jsp?username=educhina')">Send a request</span-->
</body>
</html>

zjxcs
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Ajax基础
Llishiyi的博客
12-17 1256
1.Ajax介绍 (1)、老版的请求 代web程序最初的目的就是将信息（数据）放到公共服务器上，让所有的网络 用户都可以通过浏览器访问。 我们一般都是通过以下方式让浏览器发送服务器请求，获得服务器数据 1、地址栏输入地址 2、特定元素的href或者src属性 3、表单提交 弊端：这些方案我们很难通过代码的方式进行编程，而且每次请求都会刷新网 页。 (2)、什么是Ajax 异步请求 局部更新 1、AJAX(AsynchronousJavaScriptandXML)异步的JavaScript和XML.
前端AJAX基础
qq_45149045的博客
11-23 1468
AJAX Ajax的概念： Ajax用来实现客户端网页请求服务器的数据，当用户有操作时可以实时更新部分模块或者整个网页 axios基本语法： 模板： axios({ method: '', url: '', }).then((result) => { //.then 用来指定请求成功之后的回调函数 // 形参中的result是请求成功之后的结果 })； then方法（或回调函数）负责接受发过来的数据 属性区分大小
Ajax基础语法总结
xzd2333的博客
03-14 1373
Ajax技术：在网页不跳转的情况下，向服务器请求数据 应用场景：局部刷新
AJAX基础 项目实战
gegejiawei的博客
06-18 1568
项目一：二级联动菜单实现 jQuery对ajax的支持 1、jQuery对ajax进行封装，提供了$.ajax(); 2、语法：$.ajax(options); – 传入json对象 常用设置项及说明 1、url 发送请求地址 2、type 请求类型get | post 3、data 向服务器传递的参数 4、dataType 服务器响应的数据类型 text | json | xml | HTML | jsonp | scri
Ajax 基础
流楚丶格念的博客
01-26 4905
AJAX基础1. 概述2. 快速上手2.1. readyState2.1.1. 时间轴2.2. 遵循 HTTP 1. 概述 Web 程序最初的目的就是将信息（数据）放到公共的服务器，让所有网络用户都可以通过浏览器访问。 在此之前，我们可以通过以下几种方式让浏览器发出对服务端的请求，获得服务端的数据： 地址栏输入地址，回车，刷新特定元素的 href 或 src 属性表单提交 这些方案都是我们无法通过或者很难通过代码的方式进行编程（对服务端发出请求并且接受服务端返回的响应），如果我们可以通过 JavaScrip
ajax基础
我爱美女S的博客
01-07 4497
域名：ip是一串以.分割的4段数字, 很难记住, 所以我们有了域名(一串.分割的英文字符) DNS服务：负责记录域名和IP的对应关系, 用于把域名翻译成IP地址的功能, 负责在网络里寻找目标电脑的IP。 $.ajax({ ​ type: “”, // 请求方式 - 默认不写是GET(大小写都可以) ​ url: “”, // 请求的后端地址 ​ data: {}, // 里面可以向后台传递数据 ​ success: function(res){} // 固定是一个函数题(用于接受后台返回的结果 }) ..
数据请求：Ajax基础
热门推荐
illion booked
05-02 2万+
Ajax 概述 它是浏览器提供的一套方法，可以实现页面无刷新更新数据，提高用户浏览网站应用的体验。 Ajax 的应用场景 页面上拉加载更多数据 列表数据无刷新分页 表单项离开焦点数据验证 搜索框提示文字下拉列表 Ajax 运行原理及实现 Ajax 运行原理 Ajax 相当于浏览器发送请求与接收响应的代理人，以实现在不影响用户浏览页面的情况下，局部更新页面数据，从而提高用户体验。 Ajax 的...
Ajax基础axios语法
m0_62823653的博客
04-12 1660
一.axios基本概念及语法 axios(阿克休斯) 官网 : axios中文网|axios API 中文文档 | axios axios是一个js框架，用于发送ajax请求（底层使用XMLHttpRequest） （1）.axios推荐用法(三种写法) （第一种get和post写法）推荐（data和params二选一） axios({ url:'请求路径', method:'get', data: { 'post请求参数'}, params: { 'get请求参数'} }).
【html】ajax基础
weixin_43872912的博客
09-05 1248
ajax基础
AJAX基础
Monster_man的博客
08-23 1316
AJAX基础 HTTP协议
14ajax课程_AJAX基础_
10-02
**AJAX基础详解** 在现代Web开发中，AJAX（Asynchronous JavaScript and XML）是一种核心技术，它使得网页能够实现异步数据交换，无需刷新整个页面即可更新部分内容。本教程将深入探讨AJAX的基础知识，帮助你理解其...
AJAX技术基础介绍
10-30
### AJAX技术基础详解 #### 一、概述 AJAX（Asynchronous JavaScript and XML）是一种用于创建更快、更响应式Web应用程序的技术。它通过在后台与服务器进行少量数据交换，实现局部刷新网页，从而改善用户体验。...
AJAX基础教程及实例
03-06
AJAX简介 AJAX全称为“AsynchronousJavaScriptandXML”（异步JavaScript和XML），是一种创建交互式网页应用的网页开发技术。类似于DHTML或LAMP，AJAX不是指一种单一的技术，而是有机地利用了一系列相关的技术。 AJAX...
ajax基础知识总结
08-08
学习ajax基础知识，让自己的前端技术更上一层，学会与后台交互
ajax入门基础教程
09-01
在学习AJAX的过程中，新手需要从基础开始，逐步了解如何通过JavaScript创建XMLHttpRequest对象，并用它发起请求、接收响应。同时，新手还要学习如何处理服务器返回的数据，这通常涉及解析XML或JSON格式的数据。 ...
Ajax基础（二）
zjxcs的专栏
09-14 761
三 与服务器通讯：发送请求和处理响应1、XMLHttpRequest提供两个可以访问服务器响应的属性    responseText  将响应提供为一个串    responseXML   将响应提供为一个XML对象2、使用innerHTML属性创建动态内容HTML元素的innerHTML属性是一个简单的串，表示一组开始标记和结束标记之间的内容。通过结合使用responseText
Spark SQL Catalyst工作流程
xiaoliuxxs
08-10 915
比如join 算子，Spark根据不同场景为该算子制定了不同的算法策略，有 BroadcastHashJoin、ShuffleHashJoin 以及 SortMergejoin 等，**物理执行计划实际上就是在这些具体实现中挑选一个耗时最小的算法实现。RDD的运行流程：RDD-> DAGScheduler -> TaskScheduler -> worker，任务会按照编写的代码运行，代码运行效率依赖于开发者的优化，开发者会在很大程度上影响运行效率。就是提前将需要的列查询出来，其他不需要的列裁剪掉。
微信小程序骨架屏
最新发布
djjdjdjdjddjjdjd的博客
08-16 394
⑤ 在onLoad 中页面加载前定义 isLoading.value=true, 在加载完后定义 isLoading.value=false.骨架屏是页面的一个空白版本，通常会在页面完全渲染之前，通过一些灰色的区块大致勾勒出轮廓，待数据加载完成后，再替换成真实的内容。① 在相应微信小程序页面右下角点生成骨架屏，左侧小程序目录会自动生成 .wxml 、.wxss 文件，⑥ 在生成骨架屏页面中 v-if="isLoading" v-else 定义显示与隐藏。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值