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. js条件语句初步练习

    var a=18            if(a<10){                alert("便宜")            }            else{  ...

  2. windows搭建RocketMQ服务

    写在前面: 1.基于rocketmq 4.2.0版本 2.64位 win10 系统 3.JDK 1.8 (注意,jdk路径一定不要有空格,不然执行相应的cmd命令时会报错) 4.其它需要的软件,mav ...

  3. ansible 自动化管理

    1 什么样的情形需要批量部署 1.操作系统的安装 常见的有collber,red hat satelite(redhat)系统专用. 2.操作系统的配置 常见的有cfengine,puppet,che ...

  4. 如何删除github里面的项目

    第一步 :首先登陆github 第二步:如下图选择 第三步:选择如下图 第四步:点击你要删除的项目,点击settings 第五步:把页面向下拉,找到如图按钮并点击 第六步:需要确认输入你要删除的项目名 ...

  5. oracle中查找某用户执行某张表的操作操作记录

    转载:http://www.cnblogs.com/nizuimeiabc1/p/9441937.html 1,首先查找表的操作记录 select * from v$sqlarea a where a ...

  6. 记Ubuntu Mongodb 和 Mysql的安装与使用

    安装mongodb 参考链接 https://www.cnblogs.com/shileima/p/7823434.html https://blog.csdn.net/xlengji/article ...

  7. nginx重启命令

    service nginx restart nginx -s re

  8. Sublime Text3搭建PHP开发环境

    Sublime Text3搭建PHP开发环境 本文主要给大家分享了关于Sublime Text3搭建PHP开发环境 ,感兴趣的小伙伴可以做一下参考 一.Sublime text3安装 到官网http: ...

  9. 读取XML文件内容

    myeclipse中类的格式 上面中的RunMain.java为程序执行的入口,JdbcUtil.java为实体类,XmlDocumentUtil.java执行解释xml文件与获取里面的属性,程序所需 ...

  10. ORA-01000

    A ResultSet object is automatically closed by the Statement object that generated it when that State ...