博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
ajax简介及JS写原生ajax
阅读量:5080 次
发布时间:2019-06-12

本文共 1650 字,大约阅读时间需要 5 分钟。

ajax

1.什么是ajax

  ajax 的全称是Asynchronous JavaScript and XML,其中, Asynchronous 是异步的意思,指的是异步 JavaScript 和 XML。
  AJAX 是一种用于创建快速动态网页的技术。 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下, 对的某部分进行更新。
  传统的网页(不使用AJAX)如果需要更新内容,必需重载整 个网页面。

 

2.ajax所包含的技术
  大家都知道ajax并非一种新的技术,而是几种原有技术的结合体。它由下 列技术组合⽽成。
    1.使用CSS和XHTML来表示。
    2. 使用DOM模型来交互和动态显示。
    3.使用XMLHttpRequest来和服务器进行异步通信。
    4.使用javascript来绑定和调用。

 

3.ajax原理
  Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步 请求,从服务器获得数据,然后用javascript来操作DOM而更新页面。

 

 

4.同步和异步的区别?

同步:阻塞的

  -张三叫李四去吃饭,李四一直忙得不停,张三一直等着,直到李四忙完两个人一块去吃饭

  =浏览器向服务器请求数据,服务器比较忙,浏览器一直等着(页面白屏),直到服务器返回数据,浏览器才能显示页面

异步:非阻塞的

  -张三叫李四去吃饭,李四在忙,张三说了一声然后自己就去吃饭了,李四忙完后自己去吃

  =浏览器向服务器请求数据,服务器比较忙,浏览器可以自如的干原来的事情(显示页面),服务器返回数据的时候通知浏览器一声,浏览器把返回的数据再渲染到页面,局部更新

 

5.ajax请求的实现
  1.创建XmlHttpRequest对象
    if (window.XMLHttpRequest) {
      // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
      xmlhttp=new XMLHttpRequest();
    } else {
      // IE6, IE5 浏览器执行代码
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
  2.连接服务器
    xmlhttp.open(“GET","http://127.0.0.1:8080",true);
  3.发送请求
    xmlhttp.send();
  4.等待服务器返回内容,并处理
    xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
      document.getElementById("btn").innerHTML=xmlhttp.responseText;
      }
    }

 
 
6.简介一下ajax的过程

  1. 创建XMLHttpRequest对象,也就是创建一个异步调用对象

  2. 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息

  3. 设置响应HTTP请求状态变化的函数

  4. 发送HTTP请求

  5. 获取异步调用返回的数据

  6. 使用JavaScript和DOM实现局部刷新

 
 
7.ajax的优缺点

  优点:可以使得页面不重载全部内容的情况下加载局部内容,降低数据传输量,避免用户不断刷新或者跳转页面,提高用户体验。

  缺点:不能回退, 对搜索引擎不友好;要实现ajax下的前后退功能成本较大;可能造成请求数的增加跨域问题限制。

转载于:https://www.cnblogs.com/Coding--Peasant/p/7050497.html

你可能感兴趣的文章
css3 新添加的选择器
查看>>
五个问题与自我思考
查看>>
activemq Linux下的编译
查看>>
危机意识
查看>>
黑马程序员——5 数据类型
查看>>
es6学习--变量的解构赋值
查看>>
mysql
查看>>
js函数定义方式
查看>>
LevelListDrawable
查看>>
php时间戳
查看>>
关于tomcat session机制梳理
查看>>
2015年北京大学软件project学科优秀大学生夏令营上机考试---C:单词翻转面试题...
查看>>
Github协作图想
查看>>
[USACO07OPEN]吃饭Dining
查看>>
VC6.0在Win8,10下的兼容性调整
查看>>
2-String to Integer (atoi)
查看>>
iOS 浅赋值、深复制、全然复制的知识点梳理验证(附加归档解档)
查看>>
s:actionmessage页面样式失效
查看>>
android v7包的关联
查看>>
程序员之路
查看>>