原生Ajax和jquery的ajax有什么区别?

  主要内容

  ajax是什么ajax作用原生ajax请求jquery的ajax请求jquery里面封装的ajax方法学习目标

  第一节 Ajax与http

  术语ajax最早产生于2005年,Ajax表示Asynchronous JavaScript and XML(异步JavaScript和XML),但是它不是像HTML、JavaScript或CSS这样的一种“正式的”技术,它是表示一些技术的混合交互的一个术语(JavaScript、Web浏览器和Web服务器),它使我们可以获取和显示新的内容而不必载入一个新的Web页面。增强用户体验,更有桌面程序的感觉。

  1.1 什么是Ajax?

  Ajax是一种技术方案,但并不是一种新技术。它依赖现有的CSS/HTML/JavaScript,而其中最核心的依赖是浏览器提供的XMLHttpRequest对象,是这个对象使得浏览器可以发出HTTP请求与接收HTTP响应。实现了在页面不刷新个情况下和服务器进行数据交互。

  异步的javascript和xml AJAX 是一种用于创建快速动态网页的技术。 ajax用来与后台交互

  1.2 Ajax可以做什么?

  显示新的HTML内容而不用载入整个页面提交一个表单并且立即显示结果登录而不用跳转到新的页面星级评定组件遍历数据库信息加载更多而不刷新页面1.3 客户端与服务器

  本章作业

  Ajax是什么 有什么用

  第二节 Ajax请求步骤

  2.1 Ajax请求分4步完成

  创建XMLHttpRequest对象准备发送请求 open()发送请求数据 send()请求返回的回调函数 onreadystatechange=function(){}XMLHttpRequest对象用来在【浏览器】与【服务器】之间传送数据。 通俗上来说将此对象称为request请求对象、请求对象或请求。

  2.1.1创建ajax步骤

  1.创建XMLHttpRequest对象–进行ajax请求

  对象用来在【浏览器】与【服务器】之间传送数据 浏览器提供给我们的对象

  var xhr=new XMLHttpRequest();

  2.准备发送数据open()方法

  语法:xhr.open(‘请求类型’,’url地址’,是否异步);

  xhr.open(‘get’,’02-post.php’,true);

  3.发送 send() 实际发送的数据 get请求为空 null

  xhr.send(null);

  4.回调函数onreadystatechange属性指向一个回调函数。

  当页面的加载状态发生改变的时候readyState属性就会跟随发生变化,而这时readystatechange属性所对应的回调函数就会自动被调用。

  xhr.onreadystatechange=function(){ if(xhr.readyState==4){//表示服务器数据已经完全接收 if(xhr.status==200){//, OK,访问正常console.log(xhr.responseText) } }}

  onreadystatechange 事件

  当请求被发送到服务器时,我们需要执行一些基于响应的任务。

  每当 readyState 改变时,就会触发 onreadystatechange 事件。

  readyState 属性存有 XMLHttpRequest 的状态信息。

  2.1.2 readyState状态码

  2.1.3 get有参

  document.querySelector(‘.btn’).onclick=function(){ var username=document.querySelector(‘.name’).value; var password=document.querySelector(‘.psd’).value; var xhr=new XMLHttpRequest(); xhr.open(‘get’,’06ajax_get.php?userName=’+username+’&passWord=’+password,true); xhr.send(); xhr.onreadystatechange=function(){ if(xhr.readyState==4){ if(xhr.status==200){ console.log(xhr.responseText); } } } }

  2.1.4 post有参

  document.querySelector(‘.btn’).onclick=function(){var username=document.querySelector(‘.name’).value;var password=document.querySelector(‘.psd’).value;var xhr=new XMLHttpRequest();//new Date()xhr.open(‘post’,’06ajax_get.php’,true);vardata=’userName=’+username+’&passWord=’+password; xhr.setRequestHeader(“Content-type”,”application/x-www-form-urlencoded; charset=utf-8″);xhr.send(data);xhr.onreadystatechange=function(){if(xhr.readyState==4){if(xhr.status==200){console.log(xhr.responseText);}}}}

  2.1.5 获取json数据

  document.querySelector(‘.btn’).onclick=function(){ var xhr=new XMLHttpRequest();//new Date() xhr.open(‘get’,’data/data.json’,true); xhr.send(); xhr.onreadystatechange=function(){ if(xhr.readyState==4){ if(xhr.status==200){var dataJson=JSON.parse(xhr.responseText); console.log(dataJson); var books=dataJson.data; for(var i=0;i

标签