Web前端-Ajax基础技术(上)

ajax是浏览器提供一套的api,用于向服务器发出请求，接受服务端返回的响应，通过javascript调用，实现通过代码控制请求与响应，实现网络编程。

ajax发送请求：

<!DOCTYPE html>

<html lang="en">

<head>

 <meat charset="UTF-8">

 <title>Ajax</title>

</head>

<body>

 <script>

  // ajax是一套api核心提供的类型：

  var xhr = new XMLHttpRequest();

  xhr.open();

  xhr.send();

  xhr.onreadystatechange = function(){

   if(this.readyState != 4) return

   // 获取响应的内容

   console.log(this.responseText);

  }

 </script>

</body>

</html>


<script>

var xhr = new XMLHttpRequest()

console.log(xhr.readyState);

xhr.open('GET', 'xxx.php')

console.log(xhr.readyState); // 1 初始化 请求代理对象

xhr.send()

console.log(xhr.readyState); // 1

xhr.addEventListener('readystatechange', function(){

 // if(this.readyState != 4) return

 // console.log(this.readyState);

})


// ajax创建一个XMLHttpRequest类型的对象，相当于打开一个浏览器

var xhr = new XMLHttpRequest()

// 打开一个网址之间的连接

xhr.open('GET','##.php')

// 通过连接发送一次请求

xhr.send(null)

// 指定xhr状态变化事件处理函数

xhr.onreadystatechange = function() {

 // 通过xhr 的readyState判断请求的响应

 if(this.readyState === 4){

   console.log(this);

 }

}


<script>

var xhr = new XMLHttpRequest();

xhr.open('GET', 'xxx.php')

xhr.send(null)

xhr.onload=function(){

 console.log(this.readyState)

 console.log(this.responseText)

}

</script>

http协议：

<script>

var xhr = new XMLHttpRequest()

xhr.open('GET', '/##.php') // 设置请求行

// xhr.setRequestHeader('HH', 'DA') // 设置一个请求头

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

xhr.send('key=value&key1=value1') // 设置请求体


<body>

 <form action="##.php" method="post">

  <input type="text" name="name" id="">

  <button>提交</button>

 </form>

</body>


// http

// 设置请求报文的请求行

xhr.open('GET', './###.php')

// 设置请求头

xhr.setRequestHeader('Accept', 'text/plain')

// 设置请求体

xhr.send(null)

xhr.onreadystateChange = function() {

 if(this.readyState === 4) {

  // 获取响应状态码

  console.log(this.status)

  // 获取响应状态描述

  console.log(this.statusText)

  // 获取响应头信息

 // 获取指定响应头

 console.log(this.getResponseHeader('Content-Type'))

 // 获取全部响应头

 console.log(this.getAllResponseHeader())

 // 获取响应体

 // 获取响应文本形式

 console.log(this.responseText)

 // 获取xml形式

 console.log(this.responseXML)

  }

}

进行初始化，建立连接，接收响应，响应体加载，加载成功！

// get请求

var xhr = new XMLHttpRequest()

xhr.open('GET', '.##.php?id=1')

// 一般get请求无需设置响应体

xhr.send(null);

xhr.onreadystatechange = function(){

 if(this.readyState === 4) {

  console.log(this.responseText);

 }

}


// post

if(empty($_GE['id])) {

 $json = json_encode($data);

 echo $json;

}else{

 foreach($data as $item) {

  if($item['id'] != $_GET['id'] continue;

 $json = json_encode($data);

 echo $json;

 }

}

异步的 JavaScript 和 XML

AJAX = Asynchronous JavaScript and XML

用于创建快速动态网页的技术

XMLHttpRequest 对象

var xhr;

if (window.XMLHttpRequest){

  xhr=new XMLHttpRequest();

  }

else{

  xhr=new ActiveXObject("Microsoft.XMLHTTP");

  }

向服务器发送请求

xmlhttp.open("GET","123.txt",true);

xmlhttp.send();

请求类型，为get和post，url文件在服务器上的位置，true异步和false同步。

xhr.open("POST","###.asp",true);

xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

xhr.send("name=da&age=12");

onreadystatechange 事件

XMLHttpRequest 的状态信息，从0到4变化，0为请求未初始化，1为建立连接成功，2为请求已接收，3为请求处理中，4为请求完成。

xhr.onreadystatechange=function() {

  if (xhr.readyState==4 && xhr.status==200)  {

    }

  }


<ul id="list"></ul>

var listElement = document.getElementById('list');

var xhr = new XMLHttpRequest();

xhr.open('GET', '###。php?id=2');

xhr.send(null)

xhr.onreadystatechange = function() {

 if(this.readyState != 4) return

 // console.log(this.responseText)

 var data = JSON.parse(this.responseText)

 for(var i = 0; i<data.length; i++) {

  var liElement = document.createElement('li');

  liElement.innerHTML = data[i].name;

  listElement.appendChild(liElement);

 }

}


xhr.onreadystatechange = function() {

 if(this.readyState != 4) return

 var data = JSON.parse(this.responseText)

 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() {

   var xhr1 = new XMLHttpRequest();

   xhr1.open('GET', '###.php?id=' + this.id)

   xhr1.send()

   xhr1.onreadystatechange = function() {

    if(this.readyState != 4) return

    var obj = JSON.parse(this.responseText)

    alert(obj.age)

   }

  }

 }

}

onreadystatechange事件

readyState返回当前请求的状态

responseBody将回应信息文体

status返回当前请求的状态码

statusText返回当前请求的响应的状态

abort取消当前请求

getAllResponseHeaders获取响应指定的http头

open创建一个新的http请求

send发送请求到http服务器并接收回应

setRequestHeader指定请求头

<?php

if(empty($_POST['username']) || empty($_POST['password'])) {

 exit('请输入用户名和密码');

}

// 校验

$username = $_POST['username'];

$password = $_POST['password'];

if($username === 'admin' && $password === '123') {

 exit('成功');

}

exit('失败');

?>


var btn = document.getElementById('btn');

// 获取元素

var txtUsername = document.getElementById('username');

var textPassword = document.getElementById('password');

btn.onclick = function() {

 var username = txtUsername.value;

 var password = txtPassword.value;

 var xhr = new XMLHttpRequest();

 xhr.open('POST', '##.php');

 xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')

 // xhr.send('username=' + username + '&password=' + password)

 xhr.send(`username=${username}&password=${password}`);

 // 界面

 xhr.onreadystatechange = function() {

 if(this.readyState != 4) return

 console.log(this.responseText);

 }

}


// jquery中的ajax

$.ajax({

 type: 'GET',

 url: "###.php?id="+$('#id').val(),

 dataType: "json"

 success: function(data){

  $("jq").html();

 }else{

  $("jq").html();

 },

 error: function(jq) {

  alert();

 }

})


$.ajax({

  type: "POST",

  url: "ajax.php",

  dataType: "json",

  data: {"username": "admin","password": 123},

  success: function(msg) {

    console.log(msg)

  },

  error: function() {

    console.log("error")

  }

})


function creathttprequest(){

    if(window.XMLHttpRequest)

        var xml=new XMLHttpRequest();

    else

        var xml=ActiveXObject("Miscrosoft.XMLHTTP");

    return xml;

}

function addAjax() {

    var xml = createhttprequest();

    xml.open("POST","123.php",false);

    xml.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

    xml.send(url);

    if( xml.readyState == 4 && xml.status == 200 ) {

        alert(xml.responseText);

    }

}

响应数据

<?php

 header('Content-Type: application/xml');

?>

<?xml version="1.0" encoding="utf-8"?>

<person>

 <name>dashu</name>

 <age>16</age>

 <gender>男</gender>

</person>


<script>

var xhr = new XMLHttpRequest()

xhr.open('GET', '###.php')

xhr.send()

xhr.onreadystatechange = function() {

 if(this.readyState != 4) return

 // console.log(this.responseXML)

// console.log(this.responseXML.documentElement.getElementsByTagName('name')[0])

 // console.log(this.responseXML.documentElement.children[0].innerHTML)

}

如何解析服务端的数据：

<table>

 <tbody id="content"></tbody>

</table>

<script>

 var xhr = new XMLHttpRequest()

 xhr.open('GET', '###.php')

 xhr.send()

 xhr.onreadystatechange = function() {

  if(this.readyState != 4) return

  var res = JSON.parse(this.responseText);

 var data = res.data

 for(var i = 0; i<data.length; i++) {

  var tr = document.createElement("tr");

  var td = document.createElement("td");

  td.innerHTML = data[i].id;

 }

 }

</script>

兼容：

var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');

模板：

https//aui.github.io/art-template/

面试手写：

var xhr = new XMLHttpRequest();

xhr.open('GET', '###.php');

xhr.send(null);

xhr.onreadystatechange = function() {

 if(this.readyState === 4){

  console.log(this);

 }

}

实例：

<script>

function add(){

	var xhr;

	if (window.XMLHttpRequest){

		xhr=new XMLHttpRequest();

	}else{

		xhr=new ActiveXObject("Microsoft.XMLHTTP");

	}

	xhr.onreadystatechange=function(){

		if (xhr.readyState==4 && xhr.status==200)

		{

			document.getElementById("div").innerHTML=xhr.responseText;

		}

	}

	xmlhttp.open("GET","/info.txt",true);

	xmlhttp.send();

}

</script>

实例：

<script>

 function change(str){

  if(str == ""){

   document.getElementById("txt").innerHTML="";

   return;

  }

  if(window.XMLHttpRequest){

   xhr=new XMLHttpRequest();

  }else{

   xhr=new ActiveXObject("Microsoft.XMLHTTP");

  }

  xhr.onreadystatechange=function(){

    if (xhr.readyState==4 && xhr.status==200){

     document.getElementById("txt").innerHTML=xhr.responseText;

    }

  }

 xhr.open('GET','###.php?id=' + str, true);

 xhr.send();

 }

</script>

<form>

 <select name="users" onchange="change(this.value">

  <option value=""></option>

  <option value="1"></option>

  <option value="2"></option>

 </select>

</form>

<div id="txt"></div>

//php

$id = isset($_GET["id"]) ? intval($_GET["id"]) : '';

$con = mysqli_connect('localhost','root','123456');

if (!$con)

{

    die('连接失败: ' . mysqli_error($con));

}

// 选择数据库

mysqli_select_db($con,"test");

// 设置编码

mysqli_set_charset($con, "utf8");

$sql="SELECT * FROM Websites WHERE id = '".$id."'";

$result = mysqli_query($con,$sql);

结言

好了，欢迎在留言区留言，与大家分享你的经验和心得。

感谢你学习今天的内容，如果你觉得这篇文章对你有帮助的话，也欢迎把它分享给更多的朋友，感谢。

作者简介

达叔，理工男，简书作者&全栈工程师，感性理性兼备的写作者，个人独立开发者，我相信你也可以！阅读他的文章，会上瘾！，帮你成为更好的自己。长按下方二维码可关注，欢迎分享，置顶尤佳。

Web前端-Ajax基础技术(上)的更多相关文章

  1. Web前端-Ajax基础技术(下)

    Web前端-Ajax基础技术(下) 你要明白ajax是什么,怎么使用? ajax,web程序是将信息放入公共的服务器,让所有网络用户可以通过浏览器进行访问. 浏览器发送请求,获取服务器的数据: 地址栏 ...

  2. 网络统计学与web前端开发基础技术

    网络统计学与web前端开发基础技术 学习web前端开发基础技术(网页设计)需要了解:HTML.CSS.JavaScript三种语言.下面我们就来了解一下这三门技术在网页设计中的用途: HTML是网页内 ...

  3. Web前端-JavaScript基础教程上

    Web前端-JavaScript基础教程 将放入菜单栏中,便于阅读! JavaScript是web前端开发的编程语言,大多数网站都使用到了JavaScript,所以我们要进行学习,JavaScript ...

  4. 学习web前端开发基础技术需要掌握：HTML、CSS、JavaScript语言

    1. HTML是网页内容的载体.内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字.图片.视频等. 2. CSS样式是表现.就像网页的外衣.比如,标题字体.颜色变化,或为标题加入背景图片. ...

  5. Web前端开发基础 第一天（Html和CSS）

    学习web前端开发基础技术需要掌握:HTML.CSS.JavaScript语言.下面我们就来了解下这三门技术都是用来实现什么的: 1. HTML是网页内容的载体.内容就是网页制作者放在页面上想要让用户 ...

  6. Web前端之基础知识

    学习web前端开发基础技术须要掌握:HTML.CSS.Javascript 1.HTML是网页内容的载体 内容就是网页制作者放在页面上想要让用户浏览的信息,能够包括文字.图片.视频等. 2.CSS样式 ...

  7. web前端各大技术都能实现什么功能

    web前端各大技术都能实现什么功能 以下是孜然为你总结的web前端开发你必须要一项一项掌握的技术:Html.css.ajax.jquery.extjs.JavaScript,今天为你详细解读他们各自都 ...

  8. Web前端-JavaScript基础教程下

    Web前端-JavaScript基础教程下 <script>有6个属性: async对外部脚本有效,可以用来异步操作,下载东西,不妨碍其他操作. charset为src属性指定字符集. d ...

  9. 最适合2018年自学的web前端零基础系统学习视频＋资料

    这份资料整理花了近7天,如果感觉有用,可以分享给更有需要的人. 在看接下的介绍前,我先说一下整理这份资料的初衷: 我的初衷是想帮助在这个行业发展的朋友和童鞋们,在论坛博客等地方少花些时间找资料,把有限 ...

随机推荐

  1. 网页基础:网页设计(我所知道的所有的html和css代码(含H5和CSS3)),如有错误请批评指正

    最基础的网页设计,就是给你一个图片你做成一个网页,当然,我的工作是C#,个人网页的功底不是很高首先先认识一下网页的一些相关知识: 一般的,现在一个html网页一般包含html文件,css文件,js文件 ...

  2. 基本服务器的AAA实验

    一.实验拓扑 二.网络地址分配 三.不同网段互相PING通 PC-A ping PC-B PC-A ping PC-C PC-B ping PC-C 四.配置过程 (1)在路由器R1上配置本地用户账号 ...

  3. 《前端之路》之 前端图片 类型 & 优化 & 预加载 & 懒加载 & 骨架屏

    目录 09: 前端图片 类型 & 优化 & 预加载 & 懒加载 & 骨架屏 09: 前端图片 类型 & 优化 & 预加载 & 懒加载 & ...

  4. Vue2.0源码阅读笔记（三）：计算属性

      计算属性是基于响应式依赖进行缓存的,只有在相关响应式依赖发生改变时才会重新求值,这种缓存机制在求值消耗比较大的情况下能够显著提高性能. 一.计算属性初始化   Vue 在做数据初始化时,通过 in ...

  5. 游戏AI之路径规划（3）

    目录 使用路径点(Way Point)作为节点 洪水填充算法创建路径点 使用导航网(Navigation Mesh)作为节点 区域分割 预计算 路径查询表 路径成本查询表 寻路的改进 平均帧运算 路径 ...

  6. Linq中 AsQueryable(), AsEnumerable()和ToList()的区别和用法

    Linq中 AsQueryable(), AsEnumerable()和ToList()的区别和用法:在写LINQ语句的时候,往往会看到AsEnumerable() ,AsQueryable() 和T ...

  7. php 通过header下载中文文件名 压缩包损坏或文件不存在的问题

    开发中大家都是使用的utf8编码,昨天遇到一个奇坑,本是一件很小的问题,解决也浪费了个吧小时.废话不多说,植入正题: 文件下载方式:通过header二进制流文件下载需求: 文件上传保留文件名不变数据字 ...

  8. Python函数的定义、参数传入与函数的调用

    作为计算机代码的一种抽象方式,函数在Python中扮演了极为重要的角色.今天给大家介绍Python函数的定义.参数的传入以及调用方式.其中函数参数的传入方式为本节重点内容.Python函数的参数形式包 ...

  9. 瑞芯微发布最新旗舰应用处理器-RK3588

    在瑞芯微电子第四届“开发者之春”大会上,瑞芯微推出了新一代8nm旗舰处理器-RK3588 这个芯片将采用8nm 制程工艺.基于A76+A55 内核组合,具备4K UI性能.8K VPU,拥有NPU2. ...

  10. Unable to get the CMake version located at

    出现这个问题说明你没有安装CMake,这个是使用NDK的时候需要下载的,可以在as上点击下载, SDK Tool里面