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. poj3889

    看题解之前并不知道怎么搞.. 分治是显然的 但是我不知道怎么判断4个块的位置 发现很简单... 注意14是23旋转得到的 而同时也等价于交换了横纵坐标 所以就可以做了

  2. linux shell基本知识

    shell script的一些注意事项: .#这个符号是注释本行,通常用来做批注用,#!除外,是用来标注用哪种shell执行本脚本, .执行顺序为从上到下,从做到右 .忽略空行,tab空格 .脚本换行 ...

  3. Nginx配置项优

    1.nginx运行工作进程个数,一般设置cpu的核数或者核心数x2 如果不了解cpu的核数,可以top命令之后按1看出来,也可以查看/proc/cpuinfo文件. [root@localhost~] ...

  4. 开源工具软件XMusicDownloader——音乐下载神器

    XMusicDownloader,一款 支持从百度.网易.qq和酷狗等音乐网站搜索并下载歌曲的程序. 缘起: 一直用网易音乐听歌,但是诸如李健.周杰伦的不少歌曲,网易都没有版权,要从QQ等音乐去下载, ...

  5. docker运行php网站程序

    有一个之前的php网站程序需要迁移到K8S,简单调研了下. 基础镜像 官方提供了诸如php:7.1-apache的基础镜像,但是确认必要的扩展,例如gd,当然官方提供了docker-php-ext-i ...

  6. Asp.Net MVC及Web API框架配置会碰到的几个问题及解决方案 （精髓）

    前言 刚开始创建MVC与Web API的混合项目时,碰到好多问题,今天拿出来跟大家一起分享下.有朋友私信我问项目的分层及文件夹结构在我的第一篇博客中没说清楚,那么接下来我就准备从这些文件怎么分文件夹说 ...

  7. MySQL 命令总结

    MySQL命令总结 1.数据库操作 查看在当前服务器中有多少个数据库 创建数据库 >CREATE DATABASE db_name DEFAULT CHARACTER SET utf8 COLL ...

  8. 51Nod1634 刚体图 动态规划 容斥原理 排列组合

    原文链接https://www.cnblogs.com/zhouzhendong/p/51Nod1634.html 题目传送门 - 51Nod1634 题意 基准时间限制:1 秒 空间限制:13107 ...

  9. Python3爬虫知识点总结

    1.requests获取响应头的方法 eg:获取响应头信息 import requests res = request.head(url).headers print(res)

  10. android studio使用CMake和NDK，实现应用自身被卸载时打开某一网址

    实现应用自身被卸载时打开某一网址的c代码 MyActivity: public class MyActivity extends Activity { /** * Called when the ac ...