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. PHP SOAP 发送XML

    <?php $xmldata = <<<EOT <soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap. ...

  2. javascript OOP（下）（九）

    一.javascript模拟重载 java中根据参数类型和数量的区别来实现重载,javascript弱类型,没有直接的机制实现重载,javascript中参数类型不确定和参数个数任意,通过判断实际传入 ...

  3. sublime3 破解

    —– BEGIN LICENSE —–TwitterInc200 User LicenseEA7E-8900071D77F72E 390CDD93 4DCBA022 FAF6079061AA12C0 ...

  4. Hankson 的趣味题

    题解: 硬是把一道傻逼题写到了200行.. 长长的模板就有70行.. 由于我没有做的时候觉得并不保证$a1|a0$ $b0|b1$ 然后就加了很多特判.. 我的做法就是暴力分解质因数 T*sqrt(n ...

  5. 【BZOJ3782】上学路线

    题解: 这个容斥以前做过 到i点的所有方案显然是个组合数 然后要减去不合法的方案数 我们可以考虑成减去到每个障碍点为第一次遇到的障碍然后之后乱走就可以了 因为模数不是质数,所以crt合并

  6. 【HDU】HDU5664 Lady CA and the graph

    原题链接 题解 距离省选只有一周了我居然才开始数据结构康复计划 这题很简单,就是点分树,然后二分一个值,我们计算有多少条路径大于这个值 对于一个点分树上的重心,我们可以通过双指针的方法求出它子树里的路 ...

  7. node.js版本管理

    Node安装 Node的安装需要依赖很多,如gcc等,首先我们需要将这些安装成功,用rpm命令查看下,果然我们并没有gcc等,所以要用yum进行安装(基于centos6.9版本): yum -y in ...

  8. BZOJ2553 [BeiJing2011]禁忌 AC自动机 矩阵

    原文链接http://www.cnblogs.com/zhouzhendong/p/8196279.html 题目传送门 - BZOJ2553 题意概括 引用一下lych大佬的: 在字母只有前alph ...

  9. vue的中vuex为何需要mutation更新状态，vue-router的路由的理解

    ); ); ); history.back(); history.forward(); // 修改历史,包括二个方法pushState.replaceState二个方法(objState,title, ...

  10. Hexo博客yilia主题添加Gitment评论系统

    一开始搭建hexo+yilia博客使用的评论功能是通过来必力实现的.来必力免费,功能多,一开始的体验效果很好,但是后来打开网站发现来必力加载的越来越慢(来必力是韩国的公司,可能是国内限制),遂打算换一 ...