ajax冲刺03
---恢复内容开始---
1、jq中ajax封装
简单的$.ajax方法使用示例：请关注 传参类型及数据
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./jquery-3.3.1.min.js"></script>
<script>
window.onload=()=>{ $('#btn')[0].onclick=function(){
var code=$('#code')[0].value
// console.log('cc')
$.ajax({
type:'post',
// url:'../ajax/backend.php?code='+code,
url:'../ajax/backend.php',//根据data自动拼接
data:{code:code},
dataType:'json',//xml/text/html/script/jsonp
success:function(data){
var info=$('#info')[0]
if(data.flag==0){
info.innerHTML='没有这本书'
}
else{
var tag='<ul><li>价格：'+data.price+'</li><li>作者：'+data.author+'</li></ul>'
info.innerHTML=tag
}
}
})
}
}
</script>
<style>
#container {
width: 360px;
min-height: 100px;
background-color: beige;
position: absolute;
left: 50%;
top: 10px;
margin-left: -180px;
}
</style>
</head> <body>
<div id="container">
<div>
图书编码：<input type="text" name="code" id="code">
<input type="button" value="query" id="btn">
</div>
<div id="info"></div> </div>
</body> </html>
2、ajax API
$.ajax中也可以传错误的回调：
3、$.ajax自行封装
function ajax(obj) {
//默认参数
var defaults = {
type: 'get',
data: {},
url: '#',
dataType: 'text',
async: true,
success: function (data) {
console.log(data)
}
}
//处理形参，进行覆盖
for (let key in obj) {
defaults[key] = obj[key]
}
//创建对象
var xhr = null
//兼容处理
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest()
} else {
xhr = new ActiveXObject('Microsoft.XMLHTTP')
}
//把对象形式对的参数转换为字符串形式的参数
var param = ''
for (let attr in obj.data) {
param += attr + '=' + obj.data[attr] + '&'
}
if (param) {
param = param.substring(0, param.length - 1)
}
//处理get请求参数及中文乱码问题
if (defaults.type === 'get') {
defaults.url += '?' + encodeURI(param)
}
//准备发送，设置发送的参数
xhr.open(defaults.type, defaults.url, defaults.async)
//处理post请求并设置请求头
var data=null
if(defaults.type==='post'){
data=param
xhr.setRequestHeader("content-Type","application/x-www-form-urlencoded")
}
xhr.send(data)
//处理同步情求，不执行回调函数
if(defaults.async){
return xhr.responseText//不用传回调函数
}
//设置回调函数
xhr.onreadystatechange = () => {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
var data = xhr.responseText
if(defaults.dataType=='json'){
data=JSON.parse(data)
}
obj.success(data)
// console.log('ok')
}
}
}
}
4、ajax跨域
1)
跨域是非常常见的
2）一般解决方案:jsonp
开发接口简单，不存在兼容性问题
其他方案有：
3）跨域报错
拦截跨源请求：同源策略禁止读取位于 http://over.com/data.php 的远程资源。（原因：CORS 头缺少 'Access-Control-Allow-Origin'）
Failed to load http://over.com/data.php: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access.
---恢复内容结束---
1、jq中ajax封装
简单的$.ajax方法使用示例：请关注 传参类型及数据
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./jquery-3.3.1.min.js"></script>
<script>
window.onload=()=>{ $('#btn')[0].onclick=function(){
var code=$('#code')[0].value
// console.log('cc')
$.ajax({
type:'post',
// url:'../ajax/backend.php?code='+code,
url:'../ajax/backend.php',//根据data自动拼接
data:{code:code},
dataType:'json',//xml/text/html/script/jsonp
success:function(data){
var info=$('#info')[0]
if(data.flag==0){
info.innerHTML='没有这本书'
}
else{
var tag='<ul><li>价格：'+data.price+'</li><li>作者：'+data.author+'</li></ul>'
info.innerHTML=tag
}
}
})
}
}
</script>
<style>
#container {
width: 360px;
min-height: 100px;
background-color: beige;
position: absolute;
left: 50%;
top: 10px;
margin-left: -180px;
}
</style>
</head> <body>
<div id="container">
<div>
图书编码：<input type="text" name="code" id="code">
<input type="button" value="query" id="btn">
</div>
<div id="info"></div> </div>
</body> </html>
2、ajax API
$.ajax中也可以传错误的回调：
3、$.ajax自行封装
function ajax(obj) {
//默认参数
var defaults = {
type: 'get',
data: {},
url: '#',
dataType: 'text',
async: true,
success: function (data) {
console.log(data)
}
}
//处理形参，进行覆盖
for (let key in obj) {
defaults[key] = obj[key]
}
//创建对象
var xhr = null
//兼容处理
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest()
} else {
xhr = new ActiveXObject('Microsoft.XMLHTTP')
}
//把对象形式对的参数转换为字符串形式的参数
var param = ''
for (let attr in obj.data) {
param += attr + '=' + obj.data[attr] + '&'
}
if (param) {
param = param.substring(0, param.length - 1)
}
//处理get请求参数及中文乱码问题
if (defaults.type === 'get') {
defaults.url += '?' + encodeURI(param)
}
//准备发送，设置发送的参数
xhr.open(defaults.type, defaults.url, defaults.async)
//处理post请求并设置请求头
var data=null
if(defaults.type==='post'){
data=param
xhr.setRequestHeader("content-Type","application/x-www-form-urlencoded")
}
xhr.send(data)
//处理同步情求，不执行回调函数
if(defaults.async){
return xhr.responseText//不用传回调函数
}
//设置回调函数
xhr.onreadystatechange = () => {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
var data = xhr.responseText
if(defaults.dataType=='json'){
data=JSON.parse(data)
}
obj.success(data)
// console.log('ok')
}
}
}
}
4、ajax跨域
1)
跨域是非常常见的
2）一般解决方案:jsonp
开发接口简单，不存在兼容性问题
其他方案有：
拦截跨源请求：同源策略禁止读取位于 http://over.com/data.php 的远程资源。（原因：CORS 头缺少 'Access-Control-Allow-Origin'）
3）jsonp原理解析：
①静态script标签的 src属性进行跨域请求（不常用）
如果返回的是纯数据，无法通过js获取响应的数据（如 echo '123'）
可以请求js文件也可以请求php文件。不利于url传参，必须保证加载的顺序
标签内加asnyc属性后将无法获得响应数据,是异步加载。默认
情况下时同步加载
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="http://over.com/data.php"></script>
<script>
console.log(data)
</script>
</head>
<body>
<h1>你好</h1>
</body>
</html>
②动态创建script标签，通过标签的src属性发送请求
异步的
jsonp的本质：通过jsonp访问一个url地址，所返回的内容是一个函数调用，并且通过函数调用
传递一些参数
<?php
$arr=array("name"=>"cc","age"=>"14");
echo 'foo('.json_encode($arr).')';
?>
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../jq/jquery-3.3.1.min.js"></script>
<script>
var script=document.createElement('script')
script.src='http://over.com/data.php'
var head=$('head')[0]
head.appendChild(script)
function foo(data){
console.log(data)
}
</script>
</head> <body>
<h1>你好</h1>
</body> </html>
上述代码中foo必须写死，不太灵活
下面改进：
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../jq/jquery-3.3.1.min.js"></script>
<script>
var script=document.createElement('script')
script.src='http://over.com/data.php?callback=func'
var head=$('head')[0]
head.appendChild(script)
function func(data){
console.log(data)
}
</script>
</head> <body>
<h1>你好</h1>
</body> </html>
4、jq解决跨域问题
$.ajax仍然支持跨域
经常会发生即使状态码是200也不能进入正确回调函数的情况
<?php
$cb=$_GET['cb'];
echo $cb.'('.'"hello"'.')';
?>
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../ajax/ajax.js"></script>
<script src="../jq/jquery-3.3.1.min.js"></script>
<script>
var my$=(id)=>{
return document.getElementById(id)
}
$(()=>{
my$('btn').addEventListener('click',()=>{
$.ajax({
type:'get',
dataType:'jsonp',
jsonp:'cb',//自定义参数名字(默认callback),
//这里的名字指的是等号前面的键，后端根据这个键获取方法名
jsonpCallback:'abc',//这个值是自定义回调函数的名字，就是=后面的值
url:'http://over.com/data.php',
success:(data)=>{
console.log(data)
}
})
}
)
})
</script>
</head> <body>
<input type="button" id="btn" value="submit">
</body> </html>
5、兼容一般处理与跨域的自封装ajax方法
function ajax(obj) {
// 默认参数
var defaults = {
type: 'get',
data: {},
url: '#',
dataType: 'text',
async: true,
success: function (data) {
console.log(data)
}
}
// 处理形参，传递参数的时候就覆盖默认参数，不传递就使用默认参数
for (var key in obj) {
defaults[key] = obj[key];
}
if (defaults.dataType == 'jsonp') {
ajax4jsonp(defaults)
} else {
ajax4json(defaults)
}
function ajax4json(defaults) {
// 1、创建XMLHttpRequest对象
var xhr = null;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
// 把对象形式的参数转化为字符串形式的参数
/*
{username:'zhangsan','password':123}
转换为
username=zhangsan&password=123
*/
var param = '';
for (var attr in obj.data) {
param += attr + '=' + obj.data[attr] + '&';
}
if (param) {
param = param.substring(0, param.length - 1);
}
// 处理get请求参数并且处理中文乱码问题
if (defaults.type == 'get') {
defaults.url += '?' + encodeURI(param);
}
// 2、准备发送（设置发送的参数）
xhr.open(defaults.type, defaults.url, defaults.async);
// 处理post请求参数并且设置请求头信息（必须设置）
var data = null;
if (defaults.type == 'post') {
data = param;
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
}
// 3、执行发送动作
xhr.send(data);
// 处理同步请求，不会调用回调函数
if (!defaults.async) {
if (defaults.dataType == 'json') {
return JSON.parse(xhr.responseText);
} else {
return xhr.responseText;
}
}
// 4、指定回调函数（处理服务器响应数据）
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
var data = xhr.responseText;
if (defaults.dataType == 'json') {
// data = eval("("+ data +")");
data = JSON.parse(data);
}
defaults.success(data);
}
}
}
}
}
function ajax4jsonp(defaults) {
var param = ''
for (var attr in defaults.data) {
param += attr + "=" + defaults.data[attr] + '&'
}
if (param) {
param = param.substring(0, param.length - 1)
param = '&' + param
}
var cbName = "jQuery" + ("3.3.1" + Math.random()).replace(/\D/g, "") + '_' + (new Date().getTime())
if (defaults.jsonpCallback) {
console.log('ok')
cbName = defaults.jsonpCallback
}
//回调函数
window[cbName] = function (data) {
defaults.success(data)
}
var script = doc.createElement('script')
script.src = defaults.url + '?' + defaults.jsonp + '=' + cbName + param
var head=document.getElementsByTagName('head')[0]
head.appendChild(script)
}
8、搜索联想案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#container{
width: 400px;
min-height: 300px;
background-color: lightgreen;
margin: auto;
text-align: center;
padding: 10px;
}
#container ul{
margin: 0;
}
#container li{
list-style: none;
background-color: lightGray;
text-align: left;
padding-left: 45px;
height: 25px;
line-height: 25px;
cursor: pointer; }
</style>
<script type="text/javascript" src="./jquery.js"></script>
<script type="text/javascript">
$(function(){
$("#keyword").keyup(function(){
var kw = $(this).val();
$.ajax({
url:'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',
jsonp:'cb',
data:{wd:kw},
dataType:'jsonp',
success:function(data){
var sug = data.s;
var tag = '<ul>';
$.each(sug,function(i,e){
tag += '<li>'+e+'</li>';
});
tag += '</ul>';
$("#info").html(tag);
$("#info").find('li').hover(function(){
$(this).css('backgroundColor','lightblue');
},function(){
$(this).css('backgroundColor','lightgray');
});
}
});
});
});
</script>
</head>
<body>
<div id="container">
<input type="text" name="keyword" id="keyword">
<input type="button" value="搜索" id="query">
<div id="info"></div>
</div>
</body>
</html>
(1)创建XMLHttpRequest对象,也就是创建一个异步调用对象.
(2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.
(3)设置响应HTTP请求状态变化的函数.
(4)发送HTTP请求.
(5)获取异步调用返回的数据.
(6)使用JavaScript和DOM实现局部刷新.
readyState
0 - (未初始化)还没有调用send()方法
1 - (载入)已调用send()方法，正在发送请求
2 - (载入完成)send()方法执行完成，
3 - (交互)正在解析响应内容
4 - (完成)响应内容解析完成，可以在客户端调用了
ajax冲刺03的更多相关文章
- Ajax全解
jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯. 我们先来看一些简单的方法,这些方法都是对jQuery.ajax( ...
- MSCRM 通过Ajax调用WCF服务
Call WCF Service from Dynamics CRM using AJAX A couple of days back, I had one of my ex-colleagues c ...
- 黑马eesy_15 Vue：03.生命周期与ajax异步请求
黑马eesy_15 Vue:02.常用语法 黑马eesy_15 Vue:03.生命周期 黑马eesy_15 Vue:04.Vue案例(ssm环境搭建) vue的生命周期与ajax异步请求 1.Vue的 ...
- Ajax的封装03
一.Ajax 1.原理:基于http协议的 内置对象:XMLHttpRequest 发起请求 那会相应 步骤: var xhr=new XMLHttpRequest(); // 请 ...
- no-jquery 03 Ajax
Ajax Requests GETting var xhr = new XMLHttpRequest(); xhr.open('GET', encodeURI('myservice/username? ...
- PHP. 03 .ajax传输XML、 ajax传输json、封装
XML简介 XML 指可扩展标记语言 EXtensible Markup Language .射击的时候是用来船体数据的,虽然格式跟HTML类似 xml示例 <?xml version=&quo ...
- 2019.03.24 Ajax
也还是会用到jquery中的Ajax请i求 所以第一还是引入jQuery包 可以去网上搜腾讯网静态资源库 然后引入包 Ajax还是异步处理 处理堵塞问题 import time 就可以了 ...
- 【03】AJAX 向服务器发送请求
AJAX 向服务器发送请求 创建 XMLHttpRequest 对象后,就可以向服务器发送请求了. XMLHttpRequest 对象的 open() 方法和 send() 方法用来向服务器发送请 ...
- 第03组 Beta冲刺（1/4）
队名:不等式方程组 组长博客 作业博客 团队项目进度 组员一:张逸杰(组长) 过去两天完成的任务: 文字/口头描述: 制定了初步的项目计划,并开始学习一些推荐.搜索类算法 GitHub签入纪录: 暂无 ...
随机推荐
- string.format格式化字符串中转义大括号“{}”
今天,用Java读取配置文件占位符,使用String.Format(string format,object arg0)方法.以前只知“{0}”为索引占位符(即格式项),与参数列表中的第一个对象相对应 ...
- [转]PL/SQL Developer 导入导出csv文件
PL/SQL Developer 可以导入或者导出CSV文件. 导入CSV文件步骤: 1.选择tools->text importer.... 2.选择第二个Data to oracle选项卡, ...
- Coolpy网络部署说明(宽带互联网)
本文将介绍Coolpy第二种方案的网络部署方法.以方便大家学习如何让coolpy设备部署到相应的应用场景中.本例将以水星MW310R无线路由器作为演示路由器. 1.硬件连接部分: coolpy设备=& ...
- BZOJ4816 [Sdoi2017]数字表格 数论 莫比乌斯反演
原文链接http://www.cnblogs.com/zhouzhendong/p/8666106.html 题目传送门 - BZOJ4816 题意 定义$f(0)=0,f(1)=1,f(i)=f(i ...
- Codeforces 542E Playing on Graph 其他
原文链接https://www.cnblogs.com/zhouzhendong/p/CF542E.html 题目传送门 - CF542E 题目传送门 - 51Nod1481 题意 有一幅无向图,它有 ...
- BZOJ1117 [POI2009]救火站Gas 贪心
原文链接https://www.cnblogs.com/zhouzhendong/p/BZOJ1117.html 题目传送门 - BZOJ1117 题意 给你一棵树,现在要建立一些消防站,有以下要求: ...
- Shiro笔记（二）Shiro集成SpringMVC的环境配置
0.pom文件引入 <!-- SECURITY begin --> <dependency> <groupId>org.apache.shiro</group ...
- Python编译安装遇到的问题
1.python在make时候报错 Python build finished, but the necessary bits to build these modules were not foun ...
- JAVA首次课堂测试总结
暑期生活已经结束,新的学期也已经开始,而暑期放假之前约定的JAVA首次课堂测试也如期的到来,本次测试真的可以学到和多东西,也有很多感想. 首先体会最深的就是系主任所说的软件工程不是那么好学的,真的需要 ...
- 003.Heartbeat MySQL双主复制
一 基础环境 节点 系统版本 MySQL版本 业务IP 心跳IP Master01 CentOS 7.5 MySQL 5.6 192.168.88.100 192.168.77.100 Master0 ...