ajax01

1、ajax简介



涉及AJAX的操作页面不能用文件协议访问

使用ajax发送请求：



send参数缺省默认为null

onreadyatatechange事件在状态改变时就会触发。

.readyState 返回当前所处状态 ，有0—4 共5个状态

各数字的含义：



2-已经接受到相应报文的响应头

3-正在下载相应报文的响应体

4- 整个响应报文已经被完整下载

为了避免事件覆盖，注册事件时采用以下方法：



.getAllResponseHeaders()

获取响应头中的指定键：

.getAllResponseHeader(‘键名’)

返回所有 响应头

onload事件：不考虑兼容问题，当onload事件触发时，就是状态变为4时的情形

它是html5提供的XMLHttpRequest 2.0 version 提供的



2、XML简介：

描述数据的一种方式。例：

已被json取代

4、AJAX遵循http协议：



5、数据接口

http协议中约定报文内容时字符串。当返回有结构的数据时，采用Json格式



别人提供好的接口，我们拿来用，就不需要开发服务端了

接口像下面一样



发送get请求并传递参数：

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>AJAX发送GET请求并传递参数</title>

</head>

<body>

  <ul id="list"></ul>

  <script>

    var listElement = document.getElementById('list')

    // 发送请求获取列表数据呈现在页面

    // =======================================

    var xhr = new XMLHttpRequest()

    xhr.open('GET', 'users.php')

    xhr.send()

    xhr.onreadystatechange = function () {

      if (this.readyState !== 4) return

      var data = JSON.parse(this.responseText)

      // data => 数据

      for (var i = 0; i < data.length; i++) {

        var liElement = document.createElement('li')

        liElement.innerHTML = data[i].name

        liElement.id = data[i].id

        listElement.appendChild(liElement)

        liElement.addEventListener('click', function () {

          // TODO: 通过AJAX操作获取服务端对应数据的信息

          // 如何获取当前被点击元素对应的数据的ID

          // console.log(this.id)

          var xhr1 = new XMLHttpRequest()

          xhr1.open('GET', 'users.php?id=' + this.id)

          xhr1.send()

          xhr1.onreadystatechange = function () {

            if (this.readyState !== 4) return

            var obj = JSON.parse(this.responseText)

            alert(obj.age)

          }

        })

      }

    }

    // 给每一个 li 注册点击事件

    // 因为 li 后来动态创建，所以不能这样注册事件

    // for (var i = 0; i < listElement.children.length; i++) {

    //   listElement.children[i].addEventListener('click', function () {

    //     console.log(111)

    //   })

    // }

    // var xhr = new XMLHttpRequest()

    // // 这里任然是使用URL中的问号参数传递数据

    // xhr.open('GET', 'users.php?id=2')

    // xhr.send(null)

    // xhr.onreadystatechange = function () {

    //   if (this.readyState !== 4) return

    //   console.log(this.responseText)

    // }

  </script>

</body>

</html>

发送POST请求：不刷新页面直接提交用户名及密码

js的模板字符串可以解析变量

在用POST发送请求时,如果请求体是urlencoded格式，要先设置请求头：

xhr.setRequestHeader(‘Content-Type’,‘application/x-www-form-urlencoded’)

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>AJAX发送POST请求</title>

  <style>

    #loading {

      display: none;

      position: fixed;

      top: 0;

      left: 0;

      right: 0;

      bottom: 0;

      background-color: #555;

      opacity: .5;

      text-align: center;

      line-height: 300px;

    }

    #loading::after {

      content: '加载中...';

      color : #fff;

    }

  </style>

</head>

<body>

  <div id="loading"></div>

  <table border="1">

    <tr>

      <td>用户名</td>

      <td><input type="text" id="username"></td>

    </tr>

    <tr>

      <td>密码</td>

      <td><input type="password" id="password"></td>

    </tr>

    <tr>

      <td></td>

      <td><button id="btn">登录</button></td>

    </tr>

  </table>

  <script>

    // 找一个合适的时机，做一件合适的事情

    var btn = document.getElementById('btn')

    // 1. 获取界面上的元素 value

    var txtUsername = document.getElementById('username')

    var txtPassword = document.getElementById('password')

    var loading = document.getElementById('loading')

    btn.onclick = function () {

      loading.style.display = 'block'

      var username = txtUsername.value

      var password = txtPassword.value

      // 2. 通过 XHR 发送一个 POST 请求

      var xhr = new XMLHttpRequest()

      xhr.open('POST', 'login.php')

      // !!! 一定注意 如果请求体是 urlencoded 格式 必须设置这个请求头 ！！！

      xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')

      // xhr.send('username=' + username + '&password=' + password)

      xhr.send(`username=${username}&password=${password}`)

      // 3. 根据服务端的反馈 作出界面提示

      xhr.onreadystatechange = function () {

        if (this.readyState !== 4) return

        console.log(this.responseText)

        loading.style.display = 'none'

      }

    }

  </script>

</body>

</html>

5、同步模式和异步模式



默认异步：



js中计时函数：

console.time(‘秒表名’)//开始一个秒表

console.timeEnd(‘秒表名’)//结束一个秒表



不使用同步模式

同步模式注册事件

send()会等到请求响应的过程全部完成才会继续

所以要注意事件注册的时机，必须在send()之前

六、相应数据的格式：



1）XML

浏览器默认以Html进行解析，必须设置header



接收xml的响应



取元素：

服务端应该设置一个合理的Content-Type

七、如何处理服务端响应的数据



使用国内模板引擎：ART-TEMPLATE

八、chrome中控制台展开被打印对象时会访问即使的数据

九、线程与进程：

1）进程：进行中的程序

2）线程

ajax01的更多相关文章

  1. Ajax01 什么是ajax、获取ajax对象、ajax对象的属性和方法

    1 什么是ajax ajax是一种用来改善用户体验的技术,其本质是利用浏览器提供的一个对象(XMLHttpRequest,也可称之为ajax对象) 向服务器发送异步请求;服务器返回部分数据(不是一个完 ...

  2. Ajax01 什么是ajax、获取ajax对象、ajax对象的属性和方法、编程步骤、缓存问题、乱码问题

    目录 1 什么是ajax 2 获取ajax对象 3 ajax对象的属性和方法 4 使用ajax的编程步骤 5 缓存问题 6 乱码问题 1 什么是ajax ajax是一种用来改善用户体验的技术,其本质是 ...

  3. AJAX-----01远古时期的ajax

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. Ajax-01 Ajax概述

    Web应用程序: 用户浏览器发送请求,服务端接收并处理请求,然后返回结果,往往返回就是字符串(HTML).浏览器将字符串(HTML)渲染并显示到浏览器上. 传统的Web应用: 一个简单操作(每个请求) ...

  5. ajax01简介

    (Asynchronous JavaScript and XML)Ajax :异步 JavaScript 和 XML,一种允许浏览器和服务器通信进行少量数据交换而无需重新加载整个网页,以实现更新部分网 ...

  6. 007商城项目：商品列表查询-需求分析,以及Spinmvc的访问知识

    我们之前已经整合了ssm框架并且调试已经好了,接下来我们实现商品列表的查询. 我们先进入到首页: 方法如下: 我们看到我们把所有的jsp页面都是放在: 这些页面都是放在WEB-IN下面的,也就是说这些 ...

  7. .NET运用AJAX 总结及其实例

    1.AJAX简介 (1.没有AJAX会怎么样?普通的ASP.Net每次执行服务端方法的时候都要刷新当前页面,比如实现显示服务器的时间.每次都要刷新页面的坏处:页面刷新打断用户操作.速度慢.增加服务器的 ...

  8. Ajax详解及其案例分析------如何获得Ajax对象，使用Ajax对象发送GET和POST请求，校验用户名，POST和GET请求时的乱码处理，实现级联的下拉列表

    本节主要内容预览: 1 获得Ajax对象 2 使用Ajax对象发送GET请求 3 使用Ajax对象发送POST请求 4 使用Ajax校验用户名 5 POST请求时的乱码处理 6 GET请求时的乱码处理 ...

  9. Ajax以及类似百度搜索框的demo

    public class Ajax01 extends HttpServlet{ @Override protected void service(HttpServletRequest request ...

随机推荐

  1. 基于STM32单片机光学指纹识别模块（FPM10A）全教程(基于C语言)

    本文转载,其来源在参考中:1,稍加修改,因为近期使用到这个模块,故而加以整理! 1.平台 首先我使用的是 奋斗 STM32 开发板 MINI板 基于STM32单片机光学指纹识别模块(FPM10A)全教 ...

  2. [转]CR, LF, CR/LF区别与关系

    http://weizhifeng.net/talking-about-cr-lf.html 前言 在文本处理中,CR(Carriage Return),LF(Line Feed),CR/LF是不同操 ...

  3. jquery 计算两个日期相差的天数

    <!DOCTYPE html> <html> <head> <meta charset = "utf-8"> <title&g ...

  4. P1434 [SHOI2002]滑雪 dfs

    题目描述 Michael喜欢滑雪.这并不奇怪,因为滑雪的确很刺激.可是为了获得速度,滑的区域必须向下倾斜,而且当你滑到坡底,你不得不再次走上坡或者等待升降机来载你.Michael想知道在一个区域中最长 ...

  5. ActiveMQ挂了，重启一直无法将所有实例启起来的问题

    背景 2017年3月29日  下午2-3点时分,工单模块无法访问.跟踪日志发现,ActiveMQ连接不上导致整个工单模块瘫痪: 首先判断可能是系统需要然后尝试重启工单模块,重新启动工单模块,结果:重启 ...

  6. HDFS常用API（2）

    一.读取HDFS文件数据.将本地文件写入HDFS中文件.使用IOUtils读写数据 ** * @author: PrincessHug * @date: 2019/3/18, 17:24 * @Blo ...

  7. hdu1202解题报告

    #include<stdio.h>int main(){    int n,i;    double sum,s,p,sum1;    while(scanf("%d" ...

  8. DDoS攻击与防御（1）

    分布式拒绝服务攻击的精髓是,利用分布式的客户端,向服务提供者发起大量看似合法的请求,消耗或长期占用大量资源,从而达到拒绝服务的目的.从不同的角度看,分布式拒绝服务攻击的方法有不同的分类标准.依据消耗目 ...

  9. HDU 3966 Aragorn's Story(模板题)【树链剖分】+【线段树】

    <题目链接> 题目大意: 给定一颗带点权的树,进行两种操作,一是给定树上一段路径,对其上每个点的点权增加或者减少一个数,二是对某个编号点的点权进行查询. 解题分析: 树链剖分的模板题,还不 ...

  10. 大数据技术 - MapReduce的Combiner介绍

    本章来简单介绍下 Hadoop MapReduce 中的 Combiner.Combiner 是为了聚合数据而出现的,那为什么要聚合数据呢?因为我们知道 Shuffle 过程是消耗网络IO 和 磁盘I ...