zoukankan      html  css  js  c++  java
  • Ajax

    Ajax基础介绍
     1.什么是Ajax
    首先来看一下什么是Ajax,英语全称Asynchronous JavaScript And XML,翻译成中文就是异步的JavaScript和XML。也称为异步无刷新技术

    先来解释什么是同步?什么是异步?
    所谓同步,就是发出HTTP请求以后,客户端只能等待HTTP响应回来才能够干其他的事儿,只要HTTP响应没有回来,那就什么都做不了

    所谓异步,发出HTTP请求以后,客户端不用非要等到HTTP响应回来,就可以做其他的事儿。

    Ajax并不是一门新的语言或者说是新的技术,而是之前已有的技术:JS,XML,DOM,CSS等多种技术的结合。

    Ajax是一个与服务器端无关的技术

    哪些地方使用了Ajax?
    百度地图 表单验证 智能提示
     2.Ajax工作原理
      传统Web应用的工作:当用户每触发一个HTTP请求,即使只有少量的数据发生变化,其他部分的内容都没有变化,一旦提交,页面还是会重新刷新
    处理—等待—处理—等待

    Ajax技术实现的是按需获取数据
      传统Web应用和Ajax工作原理示意图
      Ajax工作原理
     3.编写Ajax步骤
      ① 创建Ajax对象
    有两种不同的方式:IE的方式和主流浏览器的方式
    Ajax中最核心的对象就是XMLHttpRequest对象,最早是由微软公司于1999年在IE5里面内嵌的一种技术。现在市面上几乎所有浏览器都内置了这个对象。
      ② 与服务器建立连接并且向服务器发送请求
    什么时候建立服务器连接并向服务器发送请求,这里我们需要通过JS事件来进行判断
    建立与服务器的连接,通过XMLHttpRequest对象的open()
    该函数接收3个参数:1. 连接服务器的方式  2. 连接地址  3. 同步还是异步
       GET示例:如下
        这里是采用get的方式连接服务器,服务器的地址为test.php 向服务器传输的数据为username=xiejie  由于向服务区传输的数据通过get的方式是拼接在url后面的,所以send()方法里面写入一个null
       POST示例如下:
      ③ 设置回调函数是为了处理从服务器取回来的数据
    在open()方法和send()方法之间需要添加状态的监听
    通过XMLHttpRequest对象的onreadystatechange属性就可以监听Ajax引擎的工作状态
    Ajax的状态如下:
    0-(未初始化):还没有调用send()方法
    1-(载入):已经调用了send()方法
    2-(载入完成):send()方法执行完成
    3-(交互):正在解析响应内容
    4-(完成):响应内容已经解析完成,可以在客户端使用了

    通过XMLHttpRequest对象的readyState属性可以获取Ajax运行的状态值
    通过XMLHttpRequest对象的status属性可以获取到返回的HTTP响应的状态码
    通过XMLHttpRequest对象的responseText属性可以获取从服务器返回的值
       服务器端:服务器接收到客户端提交过来的用户名,然后进行判断,最后返回文本数据

  • 相关阅读:
    网页表格或div层在网页中被撑开解决之道
    jquery把给定的json自动生成多级下拉框
    jquery理想菜单实现(显示全国省市区分级效果)
    正则表达式记录
    jQuery自定义插件
    js数组及其常用方法
    vue自定义组件
    GET和POST
    可变对象和不可变对象
    js 不同元素的同一属性运动
  • 原文地址:https://www.cnblogs.com/dlp-520/p/7400121.html
Copyright © 2011-2022 走看看