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. IsNullOrEmpty和IsNullOrWhiteSpace的区别

    IsNullOrEmpty // string /// <summary>Indicates whether the specified string is null or an < ...

  2. Spring MVC 注解

    概述   Spring MVC是一个采用依赖注入的思想编写.对象的依赖注入Bean的方式可以通过Spring XML里面配置,配置之后的Bean使用时候,无需使用New关键字建立对象.但是如果所有的B ...

  3. 【BZOJ】3022: [Balkan2012]The Best Teams

    原题链接 题面 (为啥这题没有题面-- 给出\(N\)个人,和年龄\(age_{i},skill_{i}\) 然后给出\(M\)个询问,就是年龄在\(a\)以下选不超过\(k\)个人 要求选择的人水平 ...

  4. jenkins(3): jenkins执行shell命令

    参考: https://www.cnblogs.com/reblue520/p/7146693.html 1. 执行 本地 shell命令或者脚本 是在一个构建中的  bulid 选项卡. 执行本地中 ...

  5. js扩展运算符（spread）是三个点（...）

    作用:将一个数组转为用逗号分隔的参数序列. //该运算符主要用于函数调用.function push(array, ...items) { array.push(...items); } functi ...

  6. JavaEE 之 Spring（三）

    1.Spring Web MVC a.定义:是一种基于Java的实现了Web MVC设计模式的请求驱动类型的轻量级Web框架,即使用了MVC架构模式的思想,将web层进行职责解耦,基于请求驱动指的就是 ...

  7. 一、网络编程-UDP传输协议及socket套接字使用

    知识点基本介绍:1.网络通信协议一般就是UDP和TCP俩种传输协议,这一章先说UDP,UDP是一种比较简单的传输协议,如qq使用的就是UDP          2.ip:ip就是标记网络中中的一台电脑 ...

  8. eclipse tomcat报Several ports(8005 8080 8009)端口被占用问题解决方案

    在启动tomcat的时候eclipse突然报错 Several ports (8005,8080,8009) required by Tomcat v6.0 Server at localhost a ...

  9. 爆炸销毁动画组件Explosions

    爆炸销毁动画组件Explosions   爆炸销毁动画通常应用于界面元素的移除.使用该动画效果可以将移除操作表现的更为直观生动.Explosions组件是一款专门实现爆炸销动画效果的组件,它可以展示界 ...

  10. 杭电ACM1285----确定比赛名次『拓扑排序』

    //裸拓扑排序,注意先输出比较小的数,使用优先队列即可 #include <cstdio> #include <vector> #include <cstring> ...