Ajax知识

一、跨域

  跨域可以简单的理解为从一个域名访问另一个域名,出于安全考虑,浏览器不允许这么做。

  https://www.baidu.com/->跨域http://www.qq.com/img、script、iframe等元素的src属性可以直接跨域请求资源

二、ajax跨域  

  1. 可以让服务器去别的网站获取内容然后返回页面

  2. 给页面的ajax一个url,ajax把这个url传给服务器,由服务器去访问跨域地址

三、ajax四个步骤(代码演示)

  

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax4</title>
</head>
<body>
  <div id="box"></div>
    <input type="button" value="请求数据" id="btn">
  </body>
  <script>
    var box=document.getElementById(‘box‘);
    var btn=document.getElementById(‘btn‘);

    btn.onclick=function() {
    // 1.创建.XMLHttpRequest对象
     if (window.XMLHttpRequest) {

      var xhr=new XMLHttpRequest();

    }else{
      var xhr=new ActiveXObject(‘Microsoft.XMLHTTP‘)
    };

    // 2.创建与服务器的链接
    xhr.open(‘GET‘,‘http://localhost/4.27ajax/test1.json‘,true);
    // 3.发送请求
    xhr.send(null);
    xhr.onreadystatechange=function() {
      // alert(xhr.readyState);
      if (xhr.readyState==4) {//服务器准备就绪
      if (xhr.status==200) {//数据返回成功
      var json=xhr.responseText;
      var jsons=eval(‘(‘+json+‘)‘);
      // alert(jsons.title.length);
      var text=‘‘;
      for (var i = 0; i < jsons.title.length; i++) {
        text+=jsons.title[i]+‘作者:‘+jsons.author[i]+‘</br>‘;
      };
    box.innerHTML=text;
    }else{
  alert(xhr.status);
  }
  };
  };
  };
</script>
</html>

时间: 2024-10-01 11:35:59

Ajax知识的相关文章

ajax知识整理

HTTP服务 1.服务器 服务器类型 服务类型:文件服务器.数据库服务器.邮件服务器.Web服务器等: 操作系统:Linux服务器.Windows服务器等: 应用软件:Apache服务器.Nginx 服务器.IIS服务器.Tomcat服务器. weblogic服务器.WebSphere服务器.boss服务器. Node服务器等: 服务器软件 概念:使计算机具备提供某种服务能力的应用软件,称为服务器软件, 通过安装相应的服务软件,然后进行配置后就可以使计算具备了提供某种服务的能力 文件服务器:Se

ajax知识介绍

AJAX编程 即 Asynchronous [e's??kr?n?s] Javascript And XML, AJAX 不是一门的新的语言,而是对现有技术的综合利用. 本质是在HTTP协议的基础上以异步的方式与服务器进行通信. 1.1. 异步 指某段程序执行时不会阻塞其它程序执行,其表现形式为程序的执行顺序不依赖程序本身的书写顺序,相反则为同步. 其优势在于不阻塞程序的执行,从而提升整体执行效率. XMLHttpRequest可以以异步方式的处理程序. 2.2. XMLHttpRequest

$.ajax()知识

一.$.ajax(): 1.url: 要求为String类型的参数,发送请求的地址. 2.type: 要求为String类型的参数,请求方式(post或get),默认为get. 3.timeout: 要求为Number类型的参数,设置请求超时时间(毫秒). 4.async: 要求为Boolean类型的参数,默认设置为true,所有请求均为异步请求.如果需要发送同步请求,请将此选项设置为false.注意,同步请求将锁住浏览器,用户其他操作必须等待请求完成才可以执行. 5.cache: 要求为Boo

JS中AJAX知识

1. ajax介绍 传统web交互模型,浏览器直接将请求发送给服务器,服务器回送响应,直接发给浏览器,Ajax交互模型,浏览器首先将请求 发送 Ajax引擎(以XMLHttpRequest为核心)AJax引擎再将请求发送给 服务器,服务器回送响应先发给Ajax引擎,再由引擎传给浏览器显示 2. 同步交互模式和异步交互模型 a.同步交互模式,客户端提交请求,等待,在响应回到客户端前,客户端无法进行其他操作 b.异步交互模型,客户端将请求提交给Ajax引擎,客户端可以继续操作,由Ajax引擎来完成与

Ajax知识笔记——入门,同步和异步,XHR

Ajax全称:Asynchronous Javascript and XML ,异步的javascript和XML. Ajax不是一种语言,是一种无需重新加载整个网页的情况下,能更新部分网页的技术. (与后台交互,实现局部更新,异步更新) 同步和异步: 同步(Ajax出现之前):客户端发起请求,服务端对请求进行处理和响应,这期间客户端一直在等待服务器端的响应,得到服务器端的响应之后客户端重新载入页面,这时候如果你有错误,只能再次发起请求,再次等待-- 异步(Ajax出现之后):XMLHttpRe

javas cript入门要了解的知识和书籍

想要进入IT行业,领取高额的薪资,这可是不容易的,首先需要自己掌握相关的专业知识,并且能够通过相应的考核.对于很多想要从事相关行业的人员来说,可能最好的方式就是先学习一些基本的知识和操作内容,以便能够奠定一定的基础. 大多数人觉得学习Javas cript是一件容易的事情,其实也并没有错,js的确是一个容易上手的语言.这就导致很多人都会用Javas cript,但却很少有人能用的很精通的原因,因为他们大小看js这门语言的基础和内在了,基础,无论何时都是一个重要的存在,最直接的就是在你面试的时候,

Django中的Ajax详解

AJAX(Asynchronous Javascript And XML)翻译成中文就是"异步Javascript和XML".即使用Javascript语言与服务器进行异步交互,传输的数据为XML(当然,传输的数据不只是XML). 同步交互:客户端发出一个请求后,需要等待服务器响应结束后,才能发出第二个请求:异步交互:客户端发出一个请求后,无需等待服务器响应结束,就可以发出第二个请求.AJAX除了异步的特点外,还有一个就是:浏览器页面局部刷新:(这一特点给用户的感受是在不知不觉中完成请

XMLHttpRequest file API

XMLHttpRequest file API Table of Contents FormData file API jquery file api 上传文件 从 FormData 中新建图片 设置进度条 大文件切割 一些 XMLHttpRequest 2 的 API 相关阅读 FormData 使用 FormData 不需要 setRequestHeader("content-type", "application/x-www-form-urlencoded")

JavaScript入门学习书籍的阶段选择

对于许多想学习 JavaScript 的朋友来说,无疑如何选择入门的书籍是他们最头疼的问题,或许也是他们一直畏惧,甚至放弃学习 JavaScript 的理由.在 JavaScript 方面,自己不是什么专家,也不是什么高手,但自己一路走来,JavaScript 从迷茫到认识,对于JavaScript 书籍的认识或许还有些借鉴价值.入门推荐首选书籍:<JavaScript DOM 编程艺术>当初读了不下 4 遍,书内容简单,易学,上手快,编程思想严谨.好的入门书,对你未来的编程都会有着深远的影响